Question

我只能访问action，而不能访问我的减速器上的action.type。我尝试了console.log（action.type），但是会给出一个未定义的值。


export const INPUT_EMAIL = 'INPUT_EMAIL'
export const INPUT_PASSWORD = 'INPUT_PASSWORD'

export function inputEmail(email) {
    return {
        type: INPUT_EMAIL,
        email
    }
}

export function inputPassword(password) {
    return {
        type: INPUT_PASSWORD,
        password,
    }
}

// import { INPUT_EMAIL, INPUT_PASSWORD } from './actions';

const initialState = {
    email: '',
    password: '',
}

function loginReducers(state = initialState, action: Object) {
    console.log('zzZaction', action); <-- just found out it's existing 
    if(typeof state === 'undefined'){
        return initialState
    }
    // switch (action.type) {
    //     case INPUT_EMAIL: 
    //         return Object.assign({},state, {
    //             email: action.email
    //         })
    //     case INPUT_PASSWORD: 
    //     return Object.assign({}, state, {
    //         password: action.password,
    //     })
    //     default:
    //         return state
    // }
    return state
}


export default loginReducers;

//MAINPAGE

import React from 'react';
import { connect } from 'react-redux';
import './Dashboard.css';
import { inputEmail, inputPassword } from './redux/actions';
import Logo from './assets/login-logo.jpg';


class LoginForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            email: '',
            password: '',
        };
        this.store = this.props.store;

        this.handleEmailChange = this.handleEmailChange.bind(this);
        this.handlePasswordChange = this.handlePasswordChange.bind(this);
        // this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleEmailChange(event) { 
        this.setState({ email: event.target.value});
        this.props.inputEmail(this.state.email);       
    }

    handlePasswordChange(event) {
        this.setState({ password: event.target.value });
        this.props.inputPassword(this.state.password);
    }


    render() {
        return (
            <div className="Dashboard">
                <div className="Dashboard-header">
                    <img className="Dashboard-logo" src={Logo} alt={'login-logo'} />
                    <h1 className="">Login Page</h1>
                </div>
                <div className="Dashboard-content">
                    <form className="Dashboard-loginContainer" onSubmit={this.handleSubmit}>
                        <label>
                            Email:
                    <input type="email" value={this.state.email} name="email" onChange={this.handleEmailChange} />
                        </label>
                        <label>
                            Password:
                    <input type="password" value={this.state.password} onChange={this.handlePasswordChange} />
                        </label>
                        <input type="submit" value="Log-In" />
                    </form>
                </div>
            </div>
        );
    }
}

// const mapStateToProps = (state) => {

//     return {
//         email: state.email,
//         password: state.password,
//     }
// }


const mapDispatchToProps = dispatch => {
    return {
        inputEmail: (email: string) => dispatch(inputEmail(email)),
        inputPassword: (password: string) => dispatch(inputPassword(password)),
    }
};


export default connect(null, mapDispatchToProps)(LoginForm);

Answer 1

问题在这里：

store.subscribe((loginReducers));

您正在执行减速器功能，而不是打印出减速器状态。每当您的商店发生变化时，Subscribe都会触发。该操作实际上是第一次执行，但是由于您正在subscribe内调用loginReducers，因此它将运行reducer函数并返回错误"cannot get type of undefined."

您收到此错误，是因为您尝试调用此函数而未将任何操作传递给reducer。订阅执行得如此之快，以至于看起来您的初始操作没有执行。

这说明了为什么您可以在第一个console.log()中打印动作，但随后从第二个中获取不确定的内容。第二个console.log()来自订阅，试图在没有传递任何操作的情况下尝试执行loginReducers，并返回未定义的值。

您想要的是什么

store.subscribe(() => console.log(store.getState()));

以下是您更新的沙盒供参考：https://stackblitz.com/edit/react-zjywof

现在您访问操作类型应该没有任何错误。

无法访问“ action.type”，但可以访问减速器上的“ action”

1 个答案: