This content originally appeared on CodeSource.io and was authored by Pandu Rijal Pasa
If you get actions must be plain objects. use custom middleware for async actions error, here is how to fix this issue.
This error exists because you try to return a non-plain object on a redux action. For example, if you try to return another function, especially an async function, inside this action, redux doesn’t know how to handle this natively.
// redux action that returns async function
export const myAction = (payload) => async (dispatch) => {
// your action
}To fix that, you will need custom middleware injected on your redux. You can use redux-thunk or redux-saga. We will use redux-thunk in this article, so first, install the library:
// installing redux-thunk dependency
npm install --save redux-thunkThen setup the middleware on your root redux configuration:
// importing libraries
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';
// creating the redux store
const store = createStore(
rootReducer,
applyMiddleware(thunk)
);The post Fix – actions must be plain objects. use custom middleware for async actions appeared first on CodeSource.io.
This content originally appeared on CodeSource.io and was authored by Pandu Rijal Pasa
Pandu Rijal Pasa | Sciencx (2021-02-21T13:49:23+00:00) Fix – actions must be plain objects. use custom middleware for async actions. Retrieved from https://www.scien.cx/2021/02/21/fix-actions-must-be-plain-objects-use-custom-middleware-for-async-actions/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.