Error: Actions must be plain objects. Use custom middleware for async actions. React-redux error

Question

index.js

import store from "./store";
import { createStore } from 'redux';
import reducers from './reducers';
import { Provider } from 'react-redux';


console.log('init state', store.getState());

ReactDOM.render(    
    <Provider store={ store }>
        <App />
    </Provider>, 
    document.getElementById('root')
);

registerServiceWorker();

action.js

import * as types from "./types";
import axios from 'axios';
import { incrementProgress, decrementProgress } from "./progress";


const userLogin = username => ({
  type: types.AUTH_LOGIN,
  username,
});

const userLogout = () => ({
  type: types.AUTH_LOGOUT,
});

const fakeLoginRequest = (username, password) => {
    alert(username, password)
}

export const doLogin = username => {
    alert(username)
};

export const doLogout = () => dispatch => {
  dispatch(userLogout());
};

LoginForm.jsx - Dumb Component

class LoginForm extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            username: '',
            password: '',
        };

        this.handleClick = this.handleClick.bind(this);
    }

    fakeLogin = e => {
        const { username } = this.state;
        e.preventDefault();
        if (!username) {
          return alert("Provide a username.");
        }
        this.props.doLogin(username);
        this.setState({ username: "" });
      };

    render() {

        return (
            <div>
            <MuiThemeProvider>
              <div>
               <TextField
                 hintText="Enter your Username"
                 floatingLabelText="Username"
                 onChange = {(event,newValue) => this.setState({username:newValue})}
                 />
               <br/>
                 <TextField
                   type="password"
                   hintText="Enter your Password"
                   floatingLabelText="Password"
                   onChange = {(event,newValue) => this.setState({password:newValue})}
                   />
                 <br/>
                 <RaisedButton label="Submit" primary={true} style={style} onClick={this.fakeLogin}/>
             </div>
             </MuiThemeProvider>
          </div>
    );
}
}   

export default LoginForm;

LoginPage.jsx - Wise Component

const LoginPage = ({ auth, doLogin, doLogout }) => (

    <div>

      <NavBar/>
        <div className="row">
            <div style={{display: 'flex', justifyContent: 'center'}} className="col-md-4 col-md-offset-4">
                <LoginForm doLogin={doLogin} doLogout={doLogout} auth={auth} />
            </div>
        </div>
      </div>

);
const mapStateToProps = state => ({
  auth: state.auth,
});

export default connect(mapStateToProps, { doLogin, doLogout })(LoginPage);

I am totally new to react-redux and I am trying to create a flow that recognizes the current login status of the user. What I am trying to with the codes above is that I wanted to make sure that the username and password pass correctly and alerts them.

However, I get the error

Error: Actions must be plain objects. Use custom middleware for async actions. React-redux error.

On this.props.doLogin(username); of the LoginForm.jsx. It seems like it's also related to the onClick of the button. I don't understand because the function that I am calling is not async.

What am I doing wrongly?

mccambridge · Accepted Answer · 2018-06-24 23:14:44Z

2

Like the error says, your action creators have to return an object.

export const doLogin = username => {
    console.log('READ THE DOCS. IT IS VERY HELPFUL TO READ THE DOCS.');
    console.log(username);
    return {
        type: 'YOUR_ACTION_TYPE',
        payload: { whatever: 'you', want: 'it', to: 'be' }
    };
};

answered Jun 24, 2018 at 23:14

mccambridge

1,0429 silver badges16 bronze badges

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

2 Comments

Dawn17 Over a year ago

what exactly does payload refer to?

mccambridge Over a year ago

It's just data. It doesn't need to be called payload. It's just a JS object. You can do whatever you like with it. The world is your oyster. Dan Abramov wrote some great tutorials on the Redux site (right next to the docs) that would be worth some of your time. redux.js.org/basics

Collectives™ on Stack Overflow

Error: Actions must be plain objects. Use custom middleware for async actions. React-redux error

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related