2

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?

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

2 Answers 2

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,
 };
};
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks, Finally got it :)
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
});

1 Comment

Thanks, got it now :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.