reactjs - 为什么状态变化没有进入减速器？

问题描述

我在名为 this.props.onUserLogin 的文件中有一个名为 Login.js 的文件，并传递了用户身份验证令牌。我可以通过控制台日志验证我是否从 api 调用中获取令牌。当我到达减速器时，我以某种方式失去了状态的价值。我也可以使用控制台日志来验证这一点。我试图弄清楚为什么我的 state.loginToken 在减速器中是空的。

import React, {Component} from 'react';
import * as actionTypes from '../Store/actions';
import UserInfoButton from '../UserInfoButton/UserInfoButton';
import { connect } from 'react-redux';
const axios = require('axios');


class Login extends Component {

    constructor(props) {
        super(props);

        this.state = {
            email: '',
            password: '',
        };
    }

    handleChange = (event) => {
        const target = event.target;
        const value = target.value;
        const name = target.name;
        this.setState({
            [name]: value
        })
    }

    handleLogin = (event) => {
        axios.post('http://127.0.0.1:8000/api/user/token/', {
            email: this.state.email,
            password: this.state.password,
        }).then( (response) => {
            console.log('response: ' + response.data.token);
            this.props.onUserLogin(response.data.token);
        })
        .catch( (error) => {
            console.log(error)
        })

        event.preventDefault();
    }

    render() {
        const isLoggedIn = this.props.loginToken;
        let userButton;

        if(isLoggedIn) {
            userButton = <UserInfoButton/>
        } else {
            userButton = "";
        }

        return (
            <div>
                <form onSubmit={this.handleLogin}>
                    Email:<br/>
                    <input type="text" value={this.state.email} onChange={this.handleChange} name="email"/><br/>
                    Password:<br/>
                    <input type="password" value={this.state.password} onChange={this.handleChange} name="password"/><br/>
                    <br/>
                    <input type="submit" value="Submit"></input>
                </form>
                <div>{this.props.loginToken}</div>
                <br/>
                <div>{userButton}</div>
            </div>
        )
    }

}

const mapStateToProps = state => {
    return {
        loginToken: state.loginToken
    };
}

const mapDispatchToProps = dispatch => {
    return {
        onUserLogin: (userToken) => dispatch( { type: actionTypes.USER_LOGIN_ACTION, loginToken: userToken } ),
    };
}

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

减速器.js

import * as actionTypes from './actions';

const initialState = {
    loginToken: '',
}

const reducer = (state = initialState, action) => {
    switch(action.type) {
        case actionTypes.USER_LOGIN_ACTION:
            console.log('action: ' + state.loginToken);
            return {
                ...state,
                loginToken: state.loginToken,
            }
        default:
            return state;
    }
};

export default reducer;

标签： reactjsreact-redux

基本上是减速器内部的一个错字 - 您正在寻找loginToken内部state而不是action.

case actionTypes.USER_LOGIN_ACTION:
    console.log('action: ' + action.loginToken); // not state.loginToken
    return {
        ...state,
        loginToken: action.loginToken, // not state.loginToken
    }

reactjs - 为什么状态变化没有进入减速器？

问题描述

解决方案

推荐阅读