Redux Thunk middleware might throw an "Actions must be plain objects" exception?

Question

Aryan Kumar · Answer

The Redux Thunk middleware might throw an action must be plain objects exception if you try to dispatch an action that is not a plain object. This is because the Redux Thunk middleware expects actions to be plain objects, so that it can easily serialize them and send them to the middleware.

To fix this error, you need to make sure that your actions are plain objects. This means that they should not have any functions or nested objects. If your actions do have functions or nested objects, you need to convert them to plain objects before you dispatch them.

Here is an example of how to convert a function to a plain object:

const myFunction = () => {
  // Do something
};

const myPlainObject = {
  type: 'myAction',
  payload: myFunction,
};

dispatch(myPlainObject);

Here is an example of how to convert a nested object to a plain object:

const myNestedObject = {
  foo: {
    bar: 'baz',
  },
};

const myPlainObject = {
  type: 'myAction',
  payload: {
    foo: myNestedObject.foo,
  },
};

dispatch(myPlainObject);

Once you have converted your actions to plain objects, the Redux Thunk middleware will no longer throw an error.

forum

Redux Thunk middleware might throw an "Actions must be plain objects" exception?

Can you answer this question?

1 Answers