I am getting this error: actions must be plain objects. Use custom middleware for async actions

Question

I'm getting the error:

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

I've tried the solution in the following Stack Overflow question, but it didn't work:
React-Redux: Actions must be plain objects. Use custom middleware for async actions

action

export async function signupp(data){
    console.log('In signupp:');
    try{
        const request = await axios({
            method:'POST',
            url:'http://192.168.1.10:3003/users/signup',
            data:{
                email:data.email,
                password:data.password
            },
        }).then(response=>{
            console.log(response.data);
            return response.data
        }).catch( e => {
            console.log(e);
            return false
        }); 
        return {
            type:'signup',
            payload:request
        }
    }
    catch(e) {
        console.log(e);
        return false;  
    } 
}

reducer

export default function(state={},action){
    switch(action.type){
        case 'signup':
            return {
                ...state,
                auth:{
                    email: action.payload.email,
                    password:action.payload.password
                }
            }    
    }
}

store

const createStoreWithMiddleware = applyMiddleware()(createStore);
const appRedux = () => (
    <Provider store = {createStoreWithMiddleware(reducers)}>
        <App/>
    </Provider>
)
AppRegistry.registerComponent(appName, () => appRedux);

BTW, I am getting the right response in the log.

score 0 · Accepted Answer · answered Aug 10 '19 at 20:20

Inside of the component, in the place where you call signupp function, you have mapDispatchToProps function as callback in connect function from react-redux lib, which is doing behind the hoods something like dispatch(signupp())(or maybe you are doing dispatch directly without react-redux lib). According to redux API, this dispatch function expects to receive a plain object, but your signupp() function returns a promise(as you have async inside).

To solve this problem you can simply use redux-thunk middleware. Also you can see some examples in the redux docs section about async actions.

An alternative solution could be to move fetch logic to component and then dispatch just plain object with data that you received from the request.

I am getting this error: actions must be plain objects. Use custom middleware for async actions

1 Answers1