How to solve redux error Use custom middleware for async actions?

Question

export const register = (user) => async (dispatch) => {
    try {
        const { res } = await api.register(user)
        dispatch({ type: REGISTER, payload: res });
    } catch (err) {
        console.log(err)
    }
}

export default (user = [], action) => {
    switch (action.type) {
        case REGISTER:
            return [...user, action.payload];
        default:
            return user;
    }
}

When I dispatch I get "Uncaught Error: Actions must be plain objects. Use custom middleware for async actions". Can anyone tell me what is wrong here?

How are you creating the store?

HMR
– HMR

2021-03-22 08:41:49 +00:00
Commented Mar 22, 2021 at 8:41 — HMR
– HMR, Commented Mar 22, 2021 at 8:41
I fixed the issue just import error

Shahariar Rahman Sajib
– Shahariar Rahman Sajib

2021-03-22 13:02:21 +00:00
Commented Mar 22, 2021 at 13:02 — Shahariar Rahman Sajib
– Shahariar Rahman Sajib, Commented Mar 22, 2021 at 13:02

Aswin_Pradeep · Accepted Answer · 2021-03-22 06:01:18Z

1

From the description and the code snippet given, this is my conclusion on this issue.

Redux library by default does not have support for async actions. The library achieves this by means of middlewares. The two most popular middlewares for async action are redux thunk and redux saga.

I have not used redux saga much. But using redux thunk the problem can be solved as follows.

1 Install redux thunk library.

npm install redux-thunk

2 Add redux thunk to the store

Which would look something like this

const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

Here you can replace the root reducer with the name of your reducer that is used in the source.

Now while you dispatch the function from the code the dispatch used in the async function will be added by the middleware.

For more detailed explanation please refer the official redux thunk documentation.

answered Mar 22, 2021 at 6:01

Aswin_Pradeep

1115 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Shahariar Rahman Sajib Over a year ago

import user from './user' export default combineReducers({ user })

Shahariar Rahman Sajib Over a year ago

const store = createStore(reducers, compose(applyMiddleware(thunk)))

Shahariar Rahman Sajib Over a year ago

I have used thunk. But still getting the error

Aswin_Pradeep Over a year ago

Is the issue resolved @ShahariarRahmanSajib?

Collectives™ on Stack Overflow

How to solve redux error Use custom middleware for async actions?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related