Redux-thunk async actions: Use custom middleware for async actions

6
votes

I am using redux-thunk for async actions and babel-polyfill for promises. I get the following error: Error: Actions must be plain objects. Use custom middleware for async actions.

I solved this problem by including redux-promise in my middleware. I am not sure why I had to use redux-promise to resolve this issue because all examples in Redux docs use babel-polyfill. Should I continue using redux-promise or I might have some issues with babel-polyfill?

babel-polyfill is included in my app entry point:

import 'babel-polyfill';

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';

import App from './components/App.jsx';
import store from './store.jsx';

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>
    , document.querySelector('.container'));

UPDATE:

So I checked just in case if I have redux-thunk installed. It is in my package.json. Here is my store.js

import thunkMiddleware from 'redux-thunk';
import promise from 'redux-promise'

export default store = createStore(
  rootReducer,
  defaultState,
  applyMiddleware(
    thunkMiddleware,
    promise
  )
);

Here is my async action in action.js: 

function receiveStates(json) {
    return {
        type: RECEIVE_STATES,
        states: json.states,
    };
}

export function fetchStates(uuid) {
    return dispatch =>
        fetch(`https://my-api.com/session/${uuid}`)
        .then(response => response.json())
        .then(json => dispatch(receiveStates(json)));
}

Here is how I call action from component:

fetchStates(sessionID) {
    this.props.dispatch(fetchStates(sessionID));
}
# I bind this function in component's constructor 
this.fetchStates = this.fetchStates.bind(this);

And finally, this is my reducer:

function statesReducer(state = null, action) {
    switch (action.type) {
        case RECEIVE_STATES:
            return { ...state, states: action.states };
        default:
            return state;
    }
}
2
reduxreact-reduxredux-thunk
fiddle.jshell.net/josephj/e02Lcoee - zloctb

2 Answers

6
votes

I think your error could be caused by:

  1. You are not returning a thunk (a function returning a function of dispatch) from your action creator, so that the Thunk middleware doesn't catch it (maybe you are returning a promise instead?)
  2. You have not installed redux-thunk as suggested by dzeno

I suggest that you install the redux-logger middleware and add it to your store middlewares as the last one, removing the promise middleware which you would not need if returning a thunk. In this way all the actions are logged in console (previous state, current action, next state) and you can debug what action object type you are returning that is not "digested" by the thunk middleware.

1
votes

It sounds like you haven't installed / setup redux-thunk yet.

You install the npm package in the usual way:

npm install --save redux-thunk

And here is an example of applying the redux-thunk middleware

getStore.js

import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'

const getStore = ({combined, initial}) =>{
    var store = createStore(combined, initial, applyMiddleware(thunk))
    return store
}

export{
    getStore
}