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

Question

I am new to redux and I am stuck in an error, while dispatching an action I am getting error

"Actions must be plain objects. Use custom middleware for async actions.", I have checked the flow but can't see any problem,here's below code"

My JS container File:

import React from 'react'
import {Redirect} from 'react-router-dom'
import * as actions from './../store/actions/index'
import { connect } from 'react-redux'

class home extends React.Component{

constructor(props){
    super(props);
    this.state={
        isClk:false
    }
}


performLogout = (evt)=> {
    evt.preventDefault();
    this.props.onLogout();
    this.setState({isClk: true})
};

render(){

    let redirect=null;

    if (this.state.isClk){
        redirect=<Redirect to="/login"/>
    }
    return(

        <div>
            {redirect}
            <h1>In Home</h1>
            <button onClick={this.performLogout}>Logout</button>
        </div>
    )
}

}

  const mapDispatchToProps = dispatch =>{
     return {
      onLogout: () => dispatch(actions.logout())
    }
  };

 export default connect(null,mapDispatchToProps)(home)

Index.js:

   export {
auth,
logout
} from './auth'

Actions(auth.js):

export const logout =()=>{
 return(
    actionTypes.AUTH_LOGOUT
 )
};

Reducers:

  const authLogout=(state,action)=>{
     return updateObject(state,{
         token:null,
         loading:false,
         error:null
    })
   };

 const reducer=(state=initialState,action)=>{

 switch(action.type){
    case actionTypes.AUTH_FAIL: return authFail(state,action);
    case actionTypes.AUTH_LOGOUT: return authLogout(state,action);
    default:
        return state
  }

 };

Store:

       import {Provider} from 'react-redux'
       import { createStore, applyMiddleware, compose, combineReducers } from 'redux'
       import {BrowserRouter} from "react-router-dom";
       import authReducer from './Containers/store/reducers/auth'
       import thunk from 'redux-thunk';

       const composeEnhancers = compose;

       const RootReducer=combineReducers({
              auth:authReducer
       });

       const store=createStore(RootReducer,composeEnhancers(applyMiddleware(thunk)));

       const app = (
                      <Provider store={store}>
                     <BrowserRouter>
                       <App />
                     </BrowserRouter>
                      </Provider>
                  );

ReactDOM.render(app, document.getElementById('root'));

I want to perform logout action when user click on logout button,I can get where the problem, Is my store is properly initialized or any problem in thunk? or anyother maybe while dispatching, kindly guide?

Sorry but I can't see your "logout" action. looks like your action just returns a type which is a string or am I wrong? — omer.ersoy
– omer.ersoy, Commented Aug 21, 2019 at 6:51

azundo · Accepted Answer · 2019-08-21 06:51:19Z

2

Your action creator should return an object with a type, currently you're just returning the string constant only.

// Actions(auth.js):

export const logout =()=>{
 return {
    type: actionTypes.AUTH_LOGOUT,
 };
};

answered Aug 21, 2019 at 6:51

azundo

6,0521 gold badge16 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nabeel Ayub Over a year ago

Thanks, Finally got it :)

Nagesh · Accepted Answer · 2019-08-21 06:51:57Z

1

The actions in Redux needs to be the plain object, so you need to add an object like below

export const logout = () => ({
    type: actionTypes.AUTH_LOGOUT
});

answered Aug 21, 2019 at 6:51

Nagesh

4373 silver badges13 bronze badges

1 Comment

Nabeel Ayub Over a year ago

Thanks, got it now :)

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related