Split initial state into two reducers, collections and fragments.

app/components/BlogpostCreator.jsx

@@ -24,5 +24,5 @@ export default class BlogpostCreator extends React.Component {
 }
 
 BlogpostCreator.propTypes = {
-  create: React.PropTypes.function
+  create: React.PropTypes.func
 }

app/components/BlogpostList.jsx

 import React from 'react'
-import Immutable from 'immutable'
 import Blogpost from './Blogpost'
 
 import styles from '../scss/components/_blogpostList'
 
 export default class BlogpostList extends React.Component {
   render () {
-    const blogposts = this.props.manages.toKeyedSeq().map((manage, key) => {
-      return (<Blogpost key={manage.get('id')} id={manage.get('id')} title={manage.getIn(['data', 'title'])} status={manage.getIn(['data', 'status'])}/>)
-    }).toArray()
+    const blogposts = this.props.blogposts.map((blogpost, key) => {
+      return (<Blogpost key={blogpost.id} id={blogpost.id} title={blogpost.title} status={blogpost.status}/>)
+    })
     return (
-      <div className={styles['main-section']}>
-        <h3 className={styles['main-section__header']}>Blog posts</h3>
+      <div className={styles['list']}>
+        <h3 className={styles['header']}>Blog posts</h3>
         {blogposts}
       </div>
     )
   }
 }
 
-BlogpostList.propTypes = { manages: React.PropTypes.instanceOf(Immutable.OrderedMap) }
+BlogpostList.propTypes = {
+  blogposts: React.PropTypes.array
+}

app/containers/App.jsx

@@ -7,20 +7,6 @@ import '../scss/main'
 class App extends Component {
   constructor (props) {
     super(props)
-    this.handleDismissClick = this.handleDismissClick.bind(this)
-  }
-
-  renderErrorMessage () {
-    const { errorMessage } = this.props
-    if (!errorMessage) {
-      return null
-    }
-
-    return (
-      <p>
-        <b>{errorMessage}</b>
-      </p>
-    )
   }
 
   render () {
@@ -30,7 +16,6 @@ class App extends Component {
         <p>{collection.title}</p>
         <Navigation />
         <hr />
-        {this.renderErrorMessage()}
         {children}
       </div>
     )
@@ -42,7 +27,6 @@ App.propTypes = {
   collection: PropTypes.object,
   // Injected by React Redux
   errorMessage: PropTypes.string,
-  resetErrorMessage: PropTypes.func.isRequired,
   pushState: PropTypes.func.isRequired,
   inputValue: PropTypes.string.isRequired,
   // Injected by React Router
@@ -51,7 +35,7 @@ App.propTypes = {
 
 function mapStateToProps (state) {
   return {
-    collection: state.collection[0],
+    collection: state.collections[0],
     errorMessage: state.errorMessage,
     inputValue: state.router.location.pathname.substring(1)
   }

app/containers/BlogManager.jsx

@@ -29,7 +29,7 @@ BlogManager.propTypes = {
 
 function mapStateToProps (state) {
   return {
-    blog: state.collection[0],
+    blog: state.collections[0],
     blogposts: state.fragments
   }
 }

app/reducers/index.js

@@ -2,30 +2,32 @@ import { routerStateReducer as router } from 'redux-router'
 import { combineReducers } from 'redux'
 import * as ActionTypes from '../actions'
 
-const initialState = {
-  collections: [{
-    title: 'Something',
-    author: 'Jure',
-    fragments: [1, 2, 3]
-  }],
-  fragments: [
-    {
-      id: 1,
-      title: 'one',
-      source: 'hello'
-    },
-    {
-      id: 2,
-      title: 'two',
-      source: 'hellohi'
-    },
-    {
-      id: 3,
-      title: 'three',
-      source: 'hellothere'
-    }
-  ]
-}
+const initialCollections = [{
+  title: 'Something',
+  author: 'Jure',
+  fragments: [1, 2, 3]
+}]
+
+const initialFragments = [
+  {
+    id: 1,
+    title: 'one',
+    source: 'hello',
+    status: 'published'
+  },
+  {
+    id: 2,
+    title: 'two',
+    source: 'hellohi',
+    status: 'unpublished'
+  },
+  {
+    id: 3,
+    title: 'three',
+    source: 'hellothere',
+    status: 'published'
+  }
+]
 
 // Updates error message to notify about the failed fetches.
 function errorMessage (state = null, action) {
@@ -40,14 +42,17 @@ function errorMessage (state = null, action) {
   return state
 }
 
-function reducer (state = initialState, action) {
-  // For now, don’t handle any actions
-  // and just return the state given to us.
+function collections (state = initialCollections, action) {
+  return state
+}
+
+function fragments (state = initialFragments, action) {
   return state
 }
 
 const rootReducer = combineReducers({
-  reducer,
+  collections,
+  fragments,
   errorMessage,
   router
 })

app/routes.jsx

@@ -14,7 +14,7 @@ import Create from './components/Create'
 import Share from './components/Share'
 
 export default (
-  <Route path='/' component={App}>
+  <Route component={App}>
     <Route path='/' component={Share}/>
     <Route path='/admin'>
       <Route path='manages' component={Manage} />

app/scss/components/_blogpostList.scss

-
+.list {
+  background: red;
+}