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, pose, bineReducers } from 'redux'
       import {BrowserRouter} from "react-router-dom";
       import authReducer from './Containers/store/reducers/auth'
       import thunk from 'redux-thunk';

       const poseEnhancers = pose;

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

       const store=createStore(RootReducer,poseEnhancers(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?

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, pose, bineReducers } from 'redux'
       import {BrowserRouter} from "react-router-dom";
       import authReducer from './Containers/store/reducers/auth'
       import thunk from 'redux-thunk';

       const poseEnhancers = pose;

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

       const store=createStore(RootReducer,poseEnhancers(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?

• javascript
• reactjs
• redux
• react-redux
• redux-thunk

• 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 Commented Aug 21, 2019 at 6:51

2 Answers 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,
 };
};

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