CODEWITHSUNDEEP
reactjsreduxreact-redux
Rajib Ahmed
Rajib Ahmed

Reputation: 1523

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

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 => {
    return {
      type: BIND_COMMENTS,
      comments,
      postId
    }
  })
}

Upvotes: 152

Views: 359913

Answers (27)

Attila Szeremi
Attila Szeremi

Reputation: 5488

For me, the problem was the thunk action I was calling was async.

export async function actionIWantToCall() {
  return async (dispatch) {
    // ...
  }
}

I needed to make sure the action (i.e. the outer function) was not async:

export function actionIWantToCall() {
  return async (dispatch) {
    // ...
  }
}

Upvotes: 0

Chidiebere Ezeokwelume
Chidiebere Ezeokwelume

Reputation: 139

This error could also mean that your are trying to dispatch a redux action that does not exist eg

    const generalSlice = createSlice({
     name: 'general',
     initialState,
     reducers: {
      setDropdownSelectedDateRedux: (state, action) => {
       state.dropdownSelectedDateRedux = action.payload;
      },
     },
     extraReducers: (builder) => {
      // get all data daily
      builder.addCase(triggerGetAllDataDaily.pending, (state) => {
      state.getAllDataDaily.status = states.LOADING;
      state.getAllDataDaily.data = [];
      });
      builder.addCase(triggerGetAllDataDaily.fulfilled, (state: any, 
       action) => {
      state.getAllDataDaily.status = states.SUCCESSFUL;
      state.getAllDataDaily.data = action.payload;
      });
      builder.addCase(triggerGetAllDataDaily.rejected, (state) => {
      state.getAllDataDaily.status = states.ERROR;
      state.getAllDataDaily.data = [];
      });
     },
    });

Note that the name of the reducer here is setDropdownSelectedDateRedux

But then when you try to dispatch a wrong reducer eg

const dispatch=useDispatch<any>()

 useEffect(() => {
  dispatch(
   setDropdownSelectedDate({
    title: dropdownSelectedDate.value,
    value: dropdownOptionsDate.value,
   })
  );
 }, []);

You will encounter this error

Upvotes: 0

Abhishek
Abhishek

Reputation: 1120

For those who are still facing the error, this might solve the issue 

import { configureStore } from '@reduxjs/toolkit'

import logger from 'redux-logger'

import rootReducer from './reducer'

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger),
})

Upvotes: 1

Neel Dsouza
Neel Dsouza

Reputation: 1549

In my case i actually called the dispatch method without passing any function something like below which caused me above error.

dispatch();

Resolved it by passing a function

Upvotes: 0

Md Arif Khan
Md Arif Khan

Reputation: 49

this works for me.... To handle asynchronous actions in Redux, you can use middleware such as redux-thunk, redux-saga, or redux-observable. These middleware libraries allow you to dispatch functions from action creators, which can then perform asynchronous operations (such as making API requests) and dispatch additional actions when the operation is complete.

`import { createStore, combineReducers, applyMiddleware } from "redux";
 import thunk from "redux-thunk";
 export const store = createStore(rootReducer, applyMiddleware(thunk));`

Upvotes: 0

Spandan Joshi
Spandan Joshi

Reputation: 900

Use redux-thunk, setup with redux & create action like this

export const actionName = (data) => dispatch => {
  dispatch({
    type:"ACTION_TYPE",
    payload:"my payload"
  })
}

Upvotes: 1

Micah Steinberg
Micah Steinberg

Reputation: 1

A reason for this error I had that caught me off guard—

Dispatch was failing in a test even though the action creator was synchronous. Turned out I was mocking the action creator and this was the error it gave when it wasn't returning because of that.

Upvotes: 0

KARTHIKEYAN.A
KARTHIKEYAN.A

Reputation: 20138

Whenever you wish to perform async operation with redux shore you must use middleware ex. redux-thunk

Error:

action.js

export const login = () => async (dispatch, getState) => {}

sore.js

import reducerData from './store-reducer';
import {createStore} from 'redux';

const middlewares = [ReduxThunk];

const store = createStore(
  reducerData,
);
export default store;

Solution:

import reducerData from './store-reducer';
import {applyMiddleware, compose, createStore} from 'redux';
import ReduxThunk from 'redux-thunk';

const middlewares = [ReduxThunk];

const store = createStore(
  reducerData,
  compose(applyMiddleware(...middlewares)),
);
export default store;

Upvotes: 0

kausar
kausar

Reputation: 21

I have solved my issue changing :

export const = async (dispatch) => {}

to,

export const = () => async (dispatch) => {}

Upvotes: 2

Yilmaz
Yilmaz

Reputation: 49681

Without middleware, redux supports only synchronous data flow. If you need to make ajax request and dispatch the result of this request, then you need to use middlewares that handles the async operations like, redux-promise, redux-thunk or redux-saga. Or you could write your own middleware:

export default ({ dispatch }) =>
  (next) =>
  (action) => {
    // check if there is payload in  action. if not send it to the next middleware
    if (!action.payload || !action.payload.then) {
      return next.action;
    }
    // if we are here means we have action.payload. now check if it is promise
    // wait for the promise to be resolved
    action.payload.then(function (response) {
      // overwrite the action
      const newAction = { ...action, payload: response };
      dispatch(newAction);
    });
  };

Upvotes: 1

Jamal Ashraf
Jamal Ashraf

Reputation: 955

This error occurs when you make an asynchronous api call in your action creator you need to convert your action creator from synchornous action creator to asynchronous action and this conversion can be possible if we use the middleware so let me explain you in detailRedux without middleware

Two types of action creators Sync Action Creator VS Async Action Creator. you need to change sync action to async action in order to get rid of this error and this can be done with middleware

Redux with middleware enter image description here

So now solution is: Dispatch after the async request would befinished.

export function bindComments(postId) {
        return function(dispatch) {
            return API.fetchComments(postId).then(comments => {
                // dispatch
                dispatch({
                    type: BIND_COMMENTS,
                    comments,
                    postId
                });
            });
        };
    }

Upvotes: 0

Ashutosh Tiwari
Ashutosh Tiwari

Reputation: 1597

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" 
import { createStore, applyMiddleware } from 'redux';
        
...createStore(rootReducers, applyMiddleware(thunk));

Now, async operations will work inside your functions.

Upvotes: 39

Alijon Jumanazarov
Alijon Jumanazarov

Reputation: 350

This error occurs mainly if you are dispatching an action and your action is not returning an object. For example here is an increment function which I use it to increment number value when increment button is clicked. const increment = () => type: INCREMENT and here is my dispatch function onClick={() => dispatch(increment)} because of ommiting parenthesis () inside dispatch function now in your terminal there would be the same error appears. The reason dispatch function expects an object not a function name...

Upvotes: 0

Nazmul
Nazmul

Reputation: 33

Arrow function syntax

export const bindComments = (postId) => dispatch => {
 return API.fetchComments(postId).then(comments => {
   // dispatch
    dispatch({
      type: BIND_COMMENTS,
       comments,
       postId
   })
})}

Upvotes: 0

CodingEra
CodingEra

Reputation: 1827

For me, the solution was to add redux-thunk as a middleware, so inside my store configuration file, I passed redux-thunk as middleware.

inside the console:

enter image description here

import reducerData from './store-reducer';
import {applyMiddleware, compose, createStore} from 'redux';
import ReduxThunk from 'redux-thunk';

const middlewares = [ReduxThunk];

const store = createStore(
  reducerData,
  compose(applyMiddleware(...middlewares)),
);
export default store;

Upvotes: 0

Bibbi Torres
Bibbi Torres

Reputation: 179

You might also have forgotten to getDefaultMiddleware() in the middlewares' array, as I did. No further installations required:

export const store = configureStore({
  reducer: GlobalReducer,
  middleware: (getDefaultMiddleware) => [
    ...getDefaultMiddleware(),
    mainMiddleware,
  ],
});

Upvotes: 1

Fotios Tsakiris
Fotios Tsakiris

Reputation: 1556

In my case, I just wanted to sent some values to the server without saving them to redux store, so I was not using a type, nor dispatching anything at the end. But I was calling the action with dispatch. So all I had to do, was to remove the dispatch, because it wasn't really an action. It was just a function.

Upvotes: 0

abischolz
abischolz

Reputation: 51

if things were working with this code and this is a new iteration, check to make sure you have your variables in the correct order for the function (this was my mistake)

i.e. code that got this error

export const fetchProjects = newPage => (getState, dispatch) => NOPE

export const fetchProjects = newPage => (dispatch, getState) => OK YEAH

Upvotes: 0

Allen Hu
Allen Hu

Reputation: 665

Just here to share my case. I had a setLoading action, while also having

const [loading, setLoading] = useState(false)

above which I didn't delete. So it was basically not dispatching the setLoading from redux but the one from useState. Deleting/renaming this solves the problem.

Upvotes: 0

corogenda software
corogenda software

Reputation: 1

If you are working with redux-observable check that your action returns an observable. I had the issue because I used map and not a mergemap

// error
    export const myEpic = (action$: any) =>
      action$.pipe(
        ofType('...'),
        map((x => x.payload),
        map((x) => callAPi(x)),
      )
    
// success
        export const myEpic = (action$: any) =>
          action$.pipe(
            ofType('...'),
            map((x => x.payload),
            mergeMap((x) => callAPi(x)),
          )

Upvotes: 0

Vidarshan Rathnayake
Vidarshan Rathnayake

Reputation: 484

Change:

export const <youractionName> = async (dispatch) => {}

to,

export const <youractionName> = () => async (dispatch) => {}

This fixed my issue. Missed a '() =>'

Upvotes: 8

Yuvraj Patil
Yuvraj Patil

Reputation: 8774

Action Definition

const selectSlice = () => {
  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.

Upvotes: 0

Sandeep Amarnath
Sandeep Amarnath

Reputation: 6936

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))
);

Upvotes: 2

Ghasem
Ghasem

Reputation: 15613

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(() => {
    dispatch(refreshAllComponents); // <= Here was what I've missed.
  }, []);

I've forgotten to dispatch the action function with (). So doing this solved my issue.

  useEffect(() => {
    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.

Upvotes: 60

sadiq
sadiq

Reputation: 2308

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 => {
            // dispatch
            dispatch({
                type: BIND_COMMENTS,
                comments,
                postId
            });
        });
    };
}

Upvotes: 101

Amruth
Amruth

Reputation: 5912

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 => {
  return dispatch => {
    API.fetchComments(postId).then(comments => {
      dispatch({
        type: BIND_COMMENTS,
        comments,
        postId
      });
    });
  };
};

Upvotes: 7

Sinapcs
Sinapcs

Reputation: 2745

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 => {
    return fetch(url,{
      method: 'GET',
      headers: {
        "Content-Type": "application/json"
      }
      }
    )
      .then((resp) => {
        let json = resp.json();
       if (resp.status >= 200 && resp.status < 300) {
          return json;
        } else {
          return json.then(Promise.reject.bind(Promise));
        }
      })
      .then(
        json => {
          if (json.result && (json.result.status === 'error')) {
            dispatch(errorOccurred(json.result));
            dispatch(logOut());
          }
          else{
            dispatch(verified(json.result));
          }
        }
      )
      .catch((error) => {
        dispatch(warningOccurred(error, url));
      })
  }
}

Upvotes: 14

Related Questions