React-Redux Actions must be plain objects Use custom middleware for async actions

Question

Unhandled Rejection  Error   Actions must be plain objects  Use custom middleware for async actions    I wanted to add comments with every posts  So when fetch posts are run I want to call fetch comment API for all post   export function bindComments postId      return API fetchComments postId  then comments   gt        return         type  BIND COMMENTS        comments        postId

User · Answer

The error is simply asking you to insert a Middleware in between which would help to handle async operations.

You could do that by :

npm i redux-thunk

        Inside index.js

import thunk from "redux-thunk" 
        
...createStore(rootReducers, applyMiddleware(thunk));

Now, async operations will work inside your functions.

User · Answer

Make use of Arrow functions it improves the readability of code   No need to return anything in API fetchComments  Api call is asynchronous when the request is completed then will get the response  there you have to just dispatch type and data    Below code does the same job by making use of Arrow functions   export const bindComments   postId   gt      return dispatch   gt        API fetchComments postId  then comments   gt          dispatch           type  BIND COMMENTS          comments          postId

User · Answer

For future seekers who might have dropped simple details like me  in my case I just have forgotten to call my action function with parentheses   actions js    export function addNewComponent       return       type  ADD NEW COMPONENT           myComponent js   import React    useEffect   from  react   import   addNewComponent   from        redux actions      useEffect      gt        dispatch refreshAllComponents       lt   Here was what I ve missed              I ve forgotten to dispatch the action function with     So doing this solved my issue     useEffect      gt        dispatch refreshAllComponents                 Again this might have nothing to do with OP s problem  but I hope I helps people with the same problem as mine

User · Answer

I had same issue as I had missed adding composeEnhancers  Once this is setup then you can take a look into action creators  You get this error when this is not setup as well  const composeEnhancers   window   REDUX DEVTOOLS EXTENSION COMPOSE      compose   const store   createStore    rootReducer    composeEnhancers applyMiddleware thunk

User · Answer

You can t use fetch in actions without middleware  Actions must be plain objects  You can use a middleware like redux-thunk or redux-saga to do fetch and then dispatch another action   Here is an example of async action using redux-thunk middleware   export function checkUserLoggedIn  authCode     let url      loginUrl validate auth code   authCode      return dispatch   gt        return fetch url         method   GET         headers             Content-Type    application json                               then  resp    gt            let json   resp json           if  resp status  gt   200  amp  amp  resp status  lt  300              return json            else             return json then Promise reject bind Promise                              then          json   gt              if  json result  amp  amp   json result status      error                  dispatch errorOccurred json result                dispatch logOut                           else              dispatch verified json result                                         catch  error    gt            dispatch warningOccurred error  url

User · Answer

Action Definition const selectSlice        gt      return       type   SELECT SLICE          Action Dispatch store dispatch     type  SELECT SLICE       Make sure the object structure of action defined is same as action dispatched  In my case  while dispatching action  type was not assigned to property type

User · Answer

You have to dispatch after the async request ends   This would work   export function bindComments postId        return function dispatch            return API fetchComments postId  then comments   gt                   dispatch             dispatch                   type  BIND COMMENTS                  comments                  postId

[reactjs] React-Redux: Actions must be plain objects. Use custom middleware for async actions

Examples related to reactjs

Examples related to react-redux