reactjs - 无法访问`action.type`，但可以访问reducer上的`action`

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

标签： reactjsredux

Answer 1

问题在这里：

store.subscribe((loginReducers));

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

您收到此错误是因为您尝试在没有将任何操作传递到减速器的情况下调用此函数。订阅执行得如此之快，以至于看起来您的初始操作没有执行。

这解释了为什么您能够在第一个中打印操作，console.log()但从第二个中获取未定义。第二个console.log()来自订阅尝试loginReducers在没有传递任何操作时执行，返回未定义。

你想要的是这样的：

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

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

现在你不应该有任何访问动作类型的错误。