Javascript 错误：操作必须是普通对象。使用自定义中间件进行异步操作。反应重复错误

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

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-哑组件

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;

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

类LoginForm扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
用户名：“”，
密码：“”，
};
this.handleClick=this.handleClick.bind（this）；
}
fakeLogin=e=>{
const{username}=this.state；
e、 预防默认值（）；
如果（！用户名）{
返回警报（“提供用户名”）；
}
this.props.doLogin（用户名）；
this.setState（{username:}）；
};
render（）{
返回(
this.setState（{username:newValue}）}
/>


this.setState（{password:newValue}）}
/>


);
}
}   
导出默认登录信息；

LoginPage.jsx-Wise组件

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;

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

constloginpage=（{auth，doLogin，doLogout}）=>(
);
常量mapStateToProps=状态=>({
auth:state.auth，
});
导出默认连接（mapstatetops，{doLogin，doLogout}）（LoginPage）；

我对react redux完全是新手，我正在尝试创建一个识别用户当前登录状态的流。我试图使用上述代码来确保

用户名

和

密码

正确通过并发出警报

然而，我得到了错误

错误：操作必须是普通对象。使用自定义中间件进行异步操作。React redux错误。

在

this.props.doLogin（用户名）上。它似乎也与按钮的
onClick
有关。我不明白，因为我调用的函数不是异步的

我做错了什么？
正如错误所说，您的动作创建者必须返回一个对象

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

正如错误所说，动作创建者必须返回一个对象

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

payload
到底指的是什么？它只是数据。它不需要被调用
有效负载
。它只是一个JS对象。你可以用它做任何你喜欢的事。世界就是你的牡蛎。丹·阿布拉莫夫（Dan Abramov）在Redux网站上写了一些很棒的教程（就在文档旁边），值得你花一些时间。
payload
到底指的是什么？它只是数据。它不需要被调用
有效负载
。它只是一个JS对象。你可以用它做任何你喜欢的事。世界就是你的牡蛎。丹·阿布拉莫夫（Dan Abramov）在Redux网站上写了一些很棒的教程（就在文档旁边），值得你花一些时间。