Async actions in Redux
I think you should be using compose
function, so it's like
import { createStore, applyMiddleware, compose} from 'redux';import thunk from 'redux-thunk';import duedates from './reducers/duedates'export default compose(applyMiddleware(thunk))(createStore)(duedates);
Thunk allows an action creator to return a function instead of plain-object, so you use it like
export function getDueDates() { return dispatch => { console.log("IN ACTION"); fetchDueDates().done( dueDates => dispatch(getDueDatesOptimistic(dueDates.entity._embedded.dueDates)) ) };}
You were returning a Promise object, that was one part of the problem. Another part was that redux-thunk hasn't been properly applied. I bet compose
should get the problem solved.
The accepted answer is either outdated, wrong or over-convoluted. Here are the docs on the compose subject:
http://redux.js.org/docs/api/compose.html
so we can do it like this instead:
import {createStore, combineReducers, compose, applyMiddleware} from 'redux';import thunk from 'redux-thunk';const reducer = combineReducers({ user: userReducer, items: itemsReducer});// here is our redux-storeconst store = createStore(reducer, compose(applyMiddleware(thunk)));
I believe it is possible to have a working solution without using the compose
function too. Based on the documentation from the GitHub repo for redux-thunk
Solution works for redux-thunk: ^2.0.0
import { createStore, applyMiddleware } from 'redux';import thunk from 'redux-thunk';import duedates from './reducers/duedates'export function configureStore(initialState = {}) { return createStore( duedates, initialState, applyMiddleware(thunk) );}