时间戳

首页 > 解决方案 > 在反应上使用调度

reactjs - 在反应上使用调度

问题描述

我是新手，我正在尝试使用 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”的文件，其函数“login”应该将请求发送到服务器并验证登录。


    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？

标签： reactjstypescriptreact-nativedispatch

解决方案

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

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

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

但是，如果您是 Redux 的新手并且没有进行所有connect设置，那么使用 Hooks API 会更容易（也是推荐的方式）（在 react 中也建议使用 Hooks 而不是类组件）。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

推荐阅读