Update todo example to redux-act

Author: pauldijou

examples/todomvc/actions/TodoActions.js

@@ -1,42 +1,8 @@
-import * as types from '../constants/ActionTypes';
-
-export function addTodo(text) {
-  return {
-    type: types.ADD_TODO,
-    text
-  };
-}
-
-export function deleteTodo(id) {
-  return {
-    type: types.DELETE_TODO,
-    id
-  };
-}
-
-export function editTodo(id, text) {
-  return {
-    type: types.EDIT_TODO,
-    id,
-    text
-  };
-}
-
-export function markTodo(id) {
-  return {
-    type: types.MARK_TODO,
-    id
-  };
-}
-
-export function markAll() {
-  return {
-    type: types.MARK_ALL
-  };
-}
-
-export function clearMarked() {
-  return {
-    type: types.CLEAR_MARKED
-  };
-}
+import { createAction } from 'redux-act';
+
+export const addTodo = createAction('Add new todo');
+export const deleteTodo = createAction('Delete todo');
+export const editTodo = createAction('Edit todo', (id, text)=> ({id, text}));
+export const markTodo = createAction('Mark todo');
+export const markAll = createAction('Mark all todos');
+export const clearMarked = createAction('Clear all marked todos');

examples/todomvc/constants/ActionTypes.js

@@ -1,6 +1,2 @@
-export const ADD_TODO = 'ADD_TODO';
-export const DELETE_TODO = 'DELETE_TODO';
-export const EDIT_TODO = 'EDIT_TODO';
-export const MARK_TODO = 'MARK_TODO';
-export const MARK_ALL = 'MARK_ALL';
-export const CLEAR_MARKED = 'CLEAR_MARKED';
+// Remove all action constants
+// but keeping the file so it appears on the git diff

examples/todomvc/constants/TodoFilters.js

@@ -1,3 +1,4 @@
+// You can still keep constant for other purposes of course
 export const SHOW_ALL = 'show_all';
 export const SHOW_MARKED = 'show_marked';
 export const SHOW_UNMARKED = 'show_unmarked';

examples/todomvc/containers/App.js

@@ -4,7 +4,9 @@ import { createStore, combineReducers, compose } from 'redux';
 import { devTools, persistState } from 'redux-devtools';
 import { DevTools, DebugPanel, LogMonitor } from 'redux-devtools/lib/react';
 import { Provider } from 'react-redux';
+import { bindAll } from 'redux-act';
 import * as reducers from '../reducers';
+import * as todoActions from '../actions/TodoActions';
 
 const finalCreateStore = compose(
   devTools(),
@@ -15,6 +17,11 @@ const finalCreateStore = compose(
 const reducer = combineReducers(reducers);
 const store = finalCreateStore(reducer);
 
+// Just to demonstrate it, we will auto-bind all actions
+// to the unique store but feel free to bind them inside
+// the components if you prefer so
+bindAll(todoActions, store);
+
 export default class App extends Component {
   render() {
     return (

examples/todomvc/containers/TodoApp.js

@@ -3,11 +3,11 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import Header from '../components/Header';
 import MainSection from '../components/MainSection';
-import * as TodoActions from '../actions/TodoActions';
+import * as actions from '../actions/TodoActions';
 
 class TodoApp extends Component {
   render() {
-    const { todos, actions } = this.props;
+    const { todos } = this.props;
 
     return (
       <div>
@@ -24,10 +24,7 @@ function mapState(state) {
   };
 }
 
-function mapDispatch(dispatch) {
-  return {
-    actions: bindActionCreators(TodoActions, dispatch)
-  };
-}
+// Since we already did bind all our actions to the store,
+// no need to do it again in each component
 
-export default connect(mapState, mapDispatch)(TodoApp);
+export default connect(mapState)(TodoApp);

examples/todomvc/reducers/todos.js

@@ -1,50 +1,32 @@
-import { ADD_TODO, DELETE_TODO, EDIT_TODO, MARK_TODO, MARK_ALL, CLEAR_MARKED } from '../constants/ActionTypes';
+import { createReducer } from 'redux-act';
+import * as actions from '../actions/TodoActions';
 
 const initialState = [{
   text: 'Use Redux',
   marked: false,
   id: 0
 }];
 
-export default function todos(state = initialState, action) {
-  switch (action.type) {
-  case ADD_TODO:
-    return [{
-      id: (state.length === 0) ? 0 : state[0].id + 1,
-      marked: false,
-      text: action.text
-    }, ...state];
+export default createReducer({
+  [actions.addTodo]: (state, text)=> [{
+    id: (state.length === 0) ? 0 : state[0].id + 1,
+    marked: false,
+    text: text
+  }, ...state],
 
-  case DELETE_TODO:
-    return state.filter(todo =>
-      todo.id !== action.id
-    );
+  [actions.deleteTodo]: (state, id)=> state.filter(todo=> todo.id !== id),
 
-  case EDIT_TODO:
-    return state.map(todo =>
-      todo.id === action.id ?
-        { ...todo, text: action.text } :
-        todo
-    );
+  [actions.editTodo]: (state, todo)=> state.map(t=> todo.id === t.id ? {...t, text: todo.text} : t),
 
-  case MARK_TODO:
-    return state.map(todo =>
-      todo.id === action.id ?
-        { ...todo, marked: !todo.marked } :
-        todo
-    );
+  [actions.markTodo]: (state, id)=> state.map(todo=> todo.id === id ? {...todo, marked: !todo.marked} : todo),
 
-  case MARK_ALL:
+  [actions.markAll]: (state)=> {
     const areAllMarked = state.every(todo => todo.marked);
     return state.map(todo => ({
       ...todo,
       marked: !areAllMarked
     }));
+  },
 
-  case CLEAR_MARKED:
-    return state.filter(todo => todo.marked === false);
-
-  default:
-    return state;
-  }
-}
+  [actions.clearMarked]: (state)=> state.filter(todo => todo.marked === false)
+}, initialState);