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

Question

Im absolutely a beginner in React Native, Redux, and friends.
Now I try to create an app with React Native and Redux.
In the process I found this error :

I try to use Redux in my app like this :

export const confirmRegister = (userdata) => {
    return (dispatch) => {
        return(
            fetch(URI + path, {
                method: 'POST',
                headers: {
                    Accept: 'application/json',
                    'Content-Type': 'application/json',
                    'x-application-id' : AppId,
                    'hashing' : this.generateHashing(userdata)
                },
                body: userdata,
            })
            .then((response) => {
                return response.json()
            })
            .then((response)=>{
                dispatch(setDataAfterRegister(response.result))
            })
            .catch(error => {alert(error)})
        )
      };
    };

    export function setDataAfterRegister(data){
      return{
        type:'REGISTERED',
        name:data.name,
        token:data.access_token
      }
    }

I'm still learning how to use Redux.
Any helps will be really appreciated.

Here's my store:

import { createStore } from 'redux';
import rootReducer from './reducers';
 
let store = createStore(rootReducer);
 
export default store;

Tomasz Mularczyk Tomasz Mularczyk · Accepted Answer · 2018-06-03T08:45:31

confirmRegister function returns a function:

export const confirmRegister = (userdata) => {
  return (dispatch) => {

Redux don't know how to handle it natively. You need a middleware to do that. Most popular middleware that will let you return a function from your action creators is a redux-thunk.

First install it:

npm install --save redux-thunk

and then set up middleware:

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';

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

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

2 Answers