在 React 上使用 dispatch

Question

我是 React 新手，我正在尝试使用 react-redux 创建一个注册和登录页面，并使用 mern 堆栈进行调度。

当我调用方法时，函数没有运行。

我有一个登录页面的文件：


    import React from "react";
    import {login} from '../../actions/authActions';
    
    
    export class Login extends React.Component {
        
        constructor(props) {
            super(props);
        }
        
        checkIfElementIsEmpty = (element) => {
            if (!element) {
                return false
            }
            if (element.value.length === 0)
            {
                return false;
            }
            return true;
        }
    
        handleOnClickLogin = () =>
        {
            let usernameElement = document.getElementsByName("loginUsername")[0];
            let passwordElement = document.getElementsByName("loginPassword")[0];
    
            if (!this.checkIfElementIsEmpty(usernameElement))
            {
                usernameElement.style.backgroundColor = "#ff000042";
                return;
            }
            if (!this.checkIfElementIsEmpty(passwordElement))
            {
                passwordElement.style.backgroundColor = "#ff000042";
                return;
            }
            console.log("asd");
            login(usernameElement.value, passwordElement.value);
        }
    
        setColorToDefault = (e) =>{
            e.target.style.backgroundColor = "#f3f3f3";
        }
    
        render() {
            return <div className="base-container" ref={this.props.containerRef}>
                    <div className="header">Login</div>
                    <div className="content">
                        <div className="image">
                            {/* <img src={loginImg}/> */}
                        </div>
                        <div className="form">
                            <div className="form-group">
                                <label htmlFor="username">Username:</label>
                                <input type="text" name="loginUsername" placeholder="username" onFocus={this.setColorToDefault}/>
                            </div>
                            <div className="form-group">
                                <label htmlFor="password">Password:</label>
                                <input type="password" name="loginPassword" placeholder="password" onFocus={this.setColorToDefault}/>
                            </div>
                        </div>
                    </div>
                    <div className="footer">
                        <button type="button" className="btn" onClick={this.handleOnClickLogin}>
                            Login
                        </button>
                    </div>
                </div>
        }
    }

和一个名为“authActions.js”的文件，该文件具有“登录”功能，应该向服务器发送请求并验证登录。


    export const login = (email, password) => (dispatch: Function) => {
        console.log("bbb");
        // Headers
        const config = {
            headers: {
                'Content-Type': 'application/json',
                'Access-Control-Allow-Origin': "*"
            }
        }
    
      // Request body
      const body = JSON.stringify({ email, password });
    
      axios
        .post('http://${HOST}:${PORT}/api/auth/login', body, config)
        .then(res =>
          dispatch({
            type: LOGIN_SUCCESS,
            payload: res.data
          })
        )
        .catch(err => {
          dispatch(
            returnErrors(err.response.data, err.response.status, 'LOGIN_FAIL')
          );
          dispatch({
            type: LOGIN_FAIL
          });
        });
    }

调用 handleOnClickLogin 时，我只在控制台上看到 'aaa'。 'bbb' 永远不会被打印出来。为什么会这样，我需要如何正确使用 dispatch 和 react-redux？

Answer 1

您的问题需要更详细的信息，但我会猜测并向您概述它应该是什么样子。

Redux 有一个 connect 方法，该方法基本上会调用您使用 dispatch（和 getState）参数传递给它的函数。所以，给定：login = (email, password) => (dispatch: Function)。您调用 login(email, pass);，它 returns 是一个函数 (dispatch, [getState]) => xxx。 Redux 将通过商店的调度调用它来处理它。

为此，您还需要全局配置 redux、商店、提供商，但我假设您的项目已经这样做了。否则你需要去看看官方文档，它真的很好https://react-redux.js.org/tutorials/connect

但是，如果您是 Redux 的新手并且没有设置所有 connect，使用 Hooks API (还建议在反应中使用 Hooks 而不是 class 组件）。 https://react-redux.js.org/introduction/getting-started#hooks

回到您的代码，您需要的重要部分：

import React from "react";
import { login } from '../../actions/authActions';

import { connect } from 'react-redux';


class MyLoginPage extends React.Component {

    handleOnClickLogin = () => {
     ...
     // calling the login bound by redux
     this.props.doLogin(usernameElement.value, passwordElement.value);
    } 

}

const LoginPageHOC = connect(null, {
  doLogin: login, // changing names for clarity (we could do login: login)
})(MyLoginPage);

export const LoginPage = LoginPageHOC; // use the HOC instead of the class

在 React 上使用 dispatch

using dispatch on react

dispatch

typescript

reactjs

react-native