Javascript Redux操作分派不工作

当用户提交表单时，我试图发送一个操作。假设我有一个submit按钮，它在表单上触发一个

onSubmit

事件（并最终在处理表单请求时显示一个微调器图标，但此时，submit按钮只显示一个

true

或

false

值，表示是否显示微调器）

LoginPage.js

import React from 'react';
import { Link } from 'react-router-dom';

export class LoginPage extends React.Component {
  constructor(props) {
    super(props);
    this.handleLogin = this.handleLogin.bind(this);
  }

  handleLogin(e) {
    e.preventDefault();
    let email = document.getElementById('userEmail').value;
    let password = document.getElementById('userPassword').value;
    this.props.loginHandler(email, password);
  }

  render() {
    return (
      <form onSubmit={ this.handleLogin }>
        <input type="submit" value={ this.props.requestingLogin } />
      </form>
    );
  }
}

export default LoginPage;

import React from 'react';
import { connect } from 'react-redux';
import LoginPage from '../../components/login/LoginPage';
import { loginUser } from '../../actions';

export class LoginPageContainer extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <LoginPage requestingLogin={ this.props.requestingLogin } loginHandler={ this.props.loginUser } />
        );
    }
}

const mapStateToProps = state => {
    const { loginUserReducer } = state;
    return {
        requestingLogin: loginUserReducer.isRequestingLogin,
    };
};

const mapDispatchToProps = dispatch => {
    return {
        loginUser: (email, password) => { 
            dispatch(loginUser(email, password));
        }
    }
};


export default connect(mapStateToProps,  mapDispatchToProps)(LoginPageContainer);

减速机中的index.js/

export const REQUEST_LOGIN = 'REQUEST_LOGIN';
function requestLogin() {
  return {
    type: REQUEST_LOGIN,
  };
};

export const loginUser = (email, password) => {
    return dispatch => {
        // this works because when the button is clicked,
        // I can successfully console log in here.
        dispatch(requestLogin); // THIS DISPATCH IS NOT WORKING
        // API call here...
    }
};

import { combineReducers } from 'redux';
import { REQUEST_LOGIN } from '../actions';

const initialLoginState = {
    isRequestingLogin: false,
};

function loginUserReducer(state = initialLoginState, action) {
    switch(action.type) {
        case REQUEST_LOGIN:
            return Object.assign({}, state, { isRequestingLogin: true });
        default:
            console.log('returned from default');
            return state;
    }
}

const allReducers = combineReducers({
    loginUserReducer,
});

export default allReducers;

奇怪的是，我在

dispatch（）

内部

logiuser（）

之后调用的API可以工作，但是

dispatch（）

不能工作

我在网上看过很多教程，我的代码与我所看到的相匹配，但由于某些原因，我无法理解为什么调度操作不起作用。非常感谢您的帮助。

问题在于：

const mapDispatchToProps = dispatch => {
    return {
        loginUser: (email, password) => { 
            dispatch(loginUser(email, password)); [DISPATCH ACTION]
        }
    }
};

因此，loginUser是一个接收电子邮件、密码和呼叫分派的函数（loginUser（电子邮件、密码））

但是loginUser（电子邮件、密码）不返回操作，而是返回函数

export const loginUser = (email, password) => {
     return dispatch => {
         // this works because when the button is clicked,
         // I can successfully console log in here.
         dispatch(requestLogin); // THIS DISPATCH IS NOT WORKING
         // API call here...
      }
};

因此，行

[DISPATCH ACTION]

不会分派操作，而是分派函数

要使其正确，可以进行如下更改：

const mapDispatchToProps = dispatch => {
    return {
        loginUser: (email, password) => {
             loginUser(email, password)(dispatch);
        }
    }
};

因此，loginUser返回一个函数，您使用dispatch作为参数调用它。但它看起来并不漂亮。如何正确地做

export const loginUser = dispatch => {
    return (email, password) => {
        // this works because when the button is clicked,
        // I can successfully console log in here.
        dispatch(requestLogin()); // THIS DISPATCH IS NOT WORKING
        // API call here...
    }
};

在mapDispatchToProps中：

const mapDispatchToProps = dispatch => {
    return {
        loginUser: loginUser(dispatch)
    }
};

---

单击

submit

后是否重新加载页面？否，我有

e.preventDefault（）

在

handleLogin（）

方法中，我忘了把它与问题放在一起，您所要做的就是更改

调度（requestLogin）发送到
调度（requestLogin（））
并可能会将所需数据传递给action。@Panther这使它工作了！谢谢！你能创造一个答案吗？我也有同样的问题。有什么解决方案的建议吗？我试过了，但仍然不起作用，没有错误，但与以前的行为完全相同（API正在通过，但调度不起作用）是的，我忘了。它现在起作用了吗？我也有同样的问题，但不工作