Permalink
Browse files

Async dispatch using `redux-thunk` middleware

  • Loading branch information...
slashdotdash committed Nov 9, 2015
1 parent 12cb8d5 commit f3b1bdd4c96496e2e95f907ca846809dfa8fc36b
Showing with 48 additions and 9 deletions.
  1. +1 −0 package.json
  2. +23 −4 web/static/js/actions.js
  3. +12 −3 web/static/js/index.js
  4. +12 −2 web/static/js/reducers.js
@@ -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": {
@@ -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 };
}
@@ -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}>
@@ -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;
}

0 comments on commit f3b1bdd

Please sign in to comment.