Async actions in Redux Async actions in Redux reactjs reactjs

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)  );}