Redux 操作调度不起作用

Posted 2023-02-22

【中文标题】Redux 操作调度不起作用

【英文标题】：Redux action dispatch not working

【发布时间】：2018-05-13 20:54:07

【问题描述】：

我正在尝试在用户提交表单时发送操作。假设我有一个提交按钮，它在表单上触发 onSubmit 事件（最终会在处理表单请求时显示一个微调器图标，但此时，提交按钮只显示一个 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;

LoginPageContainer.js

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

reducers/中的 index.js/

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;

奇怪的是，我在 loginUser() 内的 dispatch() 之后的 API 调用有效，但 dispatch() 无效。

我在网上看过很多教程，我的代码与我看到的一致，但由于某种原因，我无法弄清楚为什么调度操作不起作用。任何帮助将不胜感激。

【问题讨论】：

点击submit后页面是否会重新加载？

不，我在handleLogin() 方法中有e.preventDefault();，但我忘了提出问题

您只需将dispatch(requestLogin); 更改为dispatch(requestLogin()); 即可将所需的数据传递给操作。

@Panther 这让它成功了！非常感谢！你能创建一个答案吗？

@Ol' Reliable 遇到了同样的问题。有什么解决方案的建议吗？？

【参考方案1】：

问题出在这里：

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

所以 loginUser 是一个接受电子邮件、密码和呼叫调度的函数(loginUser(email, password))

但是 loginUser(email, password) 不返回操作，而是返回一个函数。

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

【讨论】：

我试过了，它仍然不起作用，没有错误，但行为与以前完全相同（API 通过但调度不起作用）

是的，我忘了。

现在可以用了吗？我确实有同样的问题，但没有工作