Async dispatch using redux-thunk middleware

Author: slashdotdash

package.json

@@ -23,6 +23,7 @@
     "react-redux": "^4.0.0",
     "react-router": "^0.13.5",
     "redux": "^3.0.4",
+    "redux-logger": "^2.0.4",
     "redux-thunk": "^1.0.0"
   },
   "devDependencies": {

web/static/js/actions.js

@@ -2,7 +2,10 @@
  * action types
  */
 
-export const ADD_TODO = 'ADD_TODO';
+export const ADD_TODO_REQUEST = 'ADD_TODO_REQUEST';
+export const ADD_TODO_SUCCESS = 'ADD_TODO_SUCCESS';
+export const ADD_TODO_FAILURE = 'ADD_TODO_FAILURE';
+
 export const COMPLETE_TODO = 'COMPLETE_TODO';
 export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER';
 
@@ -20,14 +23,30 @@ export const VisibilityFilters = {
  * action creators
  */
 
+function addTodoRequest(text) {
+  return { type: ADD_TODO_REQUEST, text };
+}
+
+function addTodoSuccess(text) {
+  return { type: ADD_TODO_SUCCESS, text };
+}
+
+function addTodoFailure(text) {
+  return { type: ADD_TODO_FAILURE, text };
+}
+
 export function addTodo(text) {
-  return { type: ADD_TODO, text }
+  return dispatch => {
+    dispatch(addTodoRequest(text));
+    dispatch(addTodoSuccess(text));
+  };
 }
 
+
 export function completeTodo(index) {
-  return { type: COMPLETE_TODO, index }
+  return { type: COMPLETE_TODO, index };
 }
 
 export function setVisibilityFilter(filter) {
-  return { type: SET_VISIBILITY_FILTER, filter }
+  return { type: SET_VISIBILITY_FILTER, filter };
 }

web/static/js/index.js

@@ -1,11 +1,20 @@
 import React from 'react';
 import { render } from 'react-dom';
-import { createStore } from 'redux'
-import { Provider } from 'react-redux'
+import thunkMiddleware from 'redux-thunk';
+import createLogger from 'redux-logger';
+import { createStore, applyMiddleware } from 'redux';
+import { Provider } from 'react-redux';
 import App from './containers/App';
 import todoApp from './reducers';
 
-let store = createStore(todoApp);
+const loggerMiddleware = createLogger();
+
+const createStoreWithMiddleware = applyMiddleware(
+  thunkMiddleware, // lets us dispatch() functions
+  loggerMiddleware // neat middleware that logs actions
+)(createStore);
+
+const store = createStoreWithMiddleware(todoApp);
 
 render(
   <Provider store={store}>

web/static/js/reducers.js

@@ -1,26 +1,35 @@
 import { combineReducers } from 'redux';
-import { ADD_TODO, COMPLETE_TODO, SET_VISIBILITY_FILTER, VisibilityFilters } from './actions';
+import { ADD_TODO_REQUEST, ADD_TODO_SUCCESS, ADD_TODO_FAILURE, COMPLETE_TODO, SET_VISIBILITY_FILTER, VisibilityFilters } from './actions';
 const { SHOW_ALL } = VisibilityFilters;
 
 function visibilityFilter(state = SHOW_ALL, action) {
   switch (action.type) {
     case SET_VISIBILITY_FILTER:
       return action.filter;
+
     default:
       return state;
   }
 }
 
 function todos(state = [], action) {
   switch (action.type) {
-    case ADD_TODO:
+    case ADD_TODO_REQUEST:
       return [
         ...state,
         {
           text: action.text,
           completed: false
         }
       ];
+    case ADD_TODO_SUCCESS:
+      console.log('ADD_TODO_SUCCESS');
+      return state;
+
+    case ADD_TODO_FAILURE:
+      console.error('ADD_TODO_FAILURE');
+      return state;
+
     case COMPLETE_TODO:
       return [
         ...state.slice(0, action.index),
@@ -29,6 +38,7 @@ function todos(state = [], action) {
         }),
         ...state.slice(action.index + 1)
       ];
+
     default:
       return state;
   }