Add SET_STATE action, create reducer

package.json

@@ -46,6 +46,8 @@
     "react": "^0.14.7",
     "react-addons-pure-render-mixin": "^0.14.7",
     "react-dom": "^0.14.7",
+    "react-redux": "^4.4.1",
+    "redux": "^3.3.1",
     "todomvc-app-css": "^2.0.4"
   }
 }

src/components/TodoApp.jsx

@@ -1,10 +1,11 @@
 import React from 'react';
+import {connect} from 'react-redux';
 import TodoList from './TodoList'
 import TodoHeader from './TodoHeader'
 import TodoTools from './TodoTools'
 import Footer from './Footer'
 
-export default class TodoApp extends React.Component {
+export class TodoApp extends React.Component {
   getNbActiveItems() {
     if (this.props.todos) {
       const activeItems = this.props.todos.filter(
@@ -26,3 +27,12 @@ export default class TodoApp extends React.Component {
     </div>
   }
 };
+
+function mapStateToProps(state) {
+  return {
+    todos: state.get('todos'),
+    filter: state.get('filter')
+  };
+}
+
+export const TodoAppContainer = connect(mapStateToProps)(TodoApp);

src/index.jsx

@@ -1,20 +1,29 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import {List, Map} from 'immutable';
+import {createStore} from 'redux';
+import {Provider} from 'react-redux';
+import reducer from './reducer';
+import {TodoAppContainer} from './components/TodoApp';
 
-import TodoApp from './components/TodoApp';
-
-const todos = List.of(
-  Map({id: 1, text: 'React', status: 'active', editing: false}),
-  Map({id: 2, text: 'Redux', status: 'active', editing: false}),
-  Map({id: 3, text: 'Immutable', status: 'completed', editing: false})
-);
-
-const filter = 'all';
+const store = createStore(reducer);
+store.dispatch({
+  type: 'SET_STATE',
+  state: {
+    todos: [
+      {id: 1, text: 'React', status: 'active', editing: false},
+      {id: 2, text: 'Redux', status: 'active', editing: false},
+      {id: 3, text: 'Immutable', status: 'active', editing: false},
+    ],
+    filter: 'all'
+  }
+});
 
 require('../node_modules/todomvc-app-css/index.css');
 
 ReactDOM.render(
-  <TodoApp todos={todos} filter={filter} />,
+  <Provider store={store}>
+    <TodoAppContainer />
+  </Provider>,
   document.getElementById('app')
 );

src/reducer.js

@@ -0,0 +1,13 @@
+import {Map} from 'immutable';
+
+function setState(state, newState) {
+  return state.merge(newState);
+}
+
+export default function(state = Map(), action) {
+  switch (action.type) {
+    case 'SET_STATE':
+      return setState(state, action.state);
+  }
+  return state;
+}

test/reducer_spec.js

@@ -0,0 +1,74 @@
+import {List, Map, fromJS} from 'immutable';
+import {expect} from 'chai';
+
+import reducer from '../src/reducer';
+
+describe('reducer', () => {
+
+  it('handles SET_STATE', () => {
+    const initialState = Map();
+    const action = {
+      type: 'SET_STATE',
+      state: Map({
+        todos: List.of(
+          Map({id: 1, text: 'React', status: 'active'}),
+          Map({id: 2, text: 'Redux', status: 'active'}),
+          Map({id: 3, text: 'Immutable', status: 'completed'})
+        )
+      })
+    };
+
+    const nextState = reducer(initialState, action);
+
+    expect(nextState).to.equal(fromJS({
+      todos: [
+        {id: 1, text: 'React', status: 'active'},
+        {id: 2, text: 'Redux', status: 'active'},
+        {id: 3, text: 'Immutable', status: 'completed'}
+      ]
+    }));
+  });
+
+  it('handles SET_STATE with plain JS payload', () => {
+    const initialState = Map();
+    const action = {
+      type: 'SET_STATE',
+      state: {
+        todos: [
+          {id: 1, text: 'React', status: 'active'},
+          {id: 2, text: 'Redux', status: 'active'},
+          {id: 3, text: 'Immutable', status: 'completed'}
+        ]
+      }
+    };
+    const nextState = reducer(initialState, action);
+    expect(nextState).to.equal(fromJS({
+      todos: [
+        {id: 1, text: 'React', status: 'active'},
+        {id: 2, text: 'Redux', status: 'active'},
+        {id: 3, text: 'Immutable', status: 'completed'}
+      ]
+    }));
+  });
+
+  it('handles SET_STATE without initial state', () => {
+    const action = {
+      type: 'SET_STATE',
+      state: {
+        todos: [
+          {id: 1, text: 'React', status: 'active'},
+          {id: 2, text: 'Redux', status: 'active'},
+          {id: 3, text: 'Immutable', status: 'completed'}
+        ]
+      }
+    };
+    const nextState = reducer(undefined, action);
+    expect(nextState).to.equal(fromJS({
+      todos: [
+        {id: 1, text: 'React', status: 'active'},
+        {id: 2, text: 'Redux', status: 'active'},
+        {id: 3, text: 'Immutable', status: 'completed'}
+      ]
+    }));
+  });
+});