what is this error message for ? Actions must be plain objects. Use custom middleware for async actions

Question

actionTypes.js

export const ADD_INGREDIENT = 'ADD_INGREDIENT';
export const REMOVE_INGREDIENT = 'REMOVE_INGREDIENT';
export const SET_INGREDIENTS = 'SET_INGREDIENTS';
export const FETCH_INGREDIENTS_FAILED = 'FETCH_INGREDIENTS_FAILED';

burgerBuilder.js /actions

export const setIngredients = (ingredients) => {
    return {
        type: actionTypes.SET_INGREDIENTS,
        ingredients: ingredients
    };
};

export const fetchIngredientsFailed = () => {
    return {
        type: actionTypes.FETCH_INGREDIENTS_FAILED
    };
};

export const initIngredients = () => {
    return dispatch => {
        axios.get('/ingredients.json')
            .then(response => {
                dispatch(setIngredients(response.data))
            })
            .catch(error => {
                dispatch(fetchIngredientsFailed())
            });
    };
};

burgerBuilder.js /reducer

case actionTypes.SET_INGREDIENTS:
     return {
         ...state,
         ingredients: action.ingredients,
         error: false
     };
case actionTypes.FETCH_INGREDIENTS_FAILED:
     return {
         ...state,
         error: true
     };

BurgerBuilder.js/containers

componentDidMount () {
    this.props.onInitIngredients();
}


//Some Code...


const mapStateToProps = state => {
    return {
        ings: state.ingredients,
        price: state.totalPrice,
        error: state.error
    }
};

const mapDispatchToProps = dispatch => {
    return {
        onIngredientAdded: (ingName) => dispatch(burgerbuilderActions.addIngredient(ingName)),
        onIngredientRemoved: (ingName) => dispatch(burgerbuilderActions.removeIngredient(ingName)),
        onInitIngredients: () => dispatch(burgerbuilderActions.initIngredients())
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(withErrorHandler(BurgerBuilder, axios));

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {Provider} from 'react-redux';
import {createStore, applyMiddleware, compose} from 'redux';
import {BrowserRouter} from 'react-router-dom';
import thunk from 'redux-thunk';
import burgerBuilderReducer from './store/reducers/burgerBuilder';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION__ || compose;

const store = createStore(burgerBuilderReducer, composeEnhancers(
    applyMiddleware(thunk)
));

const app = (
    <Provider store={store}>
        <BrowserRouter>
            <App/>
        </BrowserRouter>
    </Provider>
);

I've got this error "Actions must be plain objects. Use custom middleware for async actions" when I was working on a demo project. I don't know but I feel that this error comes from initIngredients() in burgerBuilder.js/action file. I'm new in react!

Answer 1

It seems that the code is currently broken, you can fix this issue by change:

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION__ || compose;

const store = createStore(burgerBuilderReducer, composeEnhancers(
    applyMiddleware(thunk)
));

with:

const store = createStore(
  rootReducer,
  //composeEnhancers(applyMiddleware(thunk)) // => NOTE: This would break the code!
  // Thisone instead will work fine...
  compose(
    applyMiddleware(
      thunk
      // Other middlewares
    ),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() // Chrome debugger
  )
);