Не может получить доступ к `action.type`, но может получить доступ к` 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);

Answer 1

Проблема здесь:

store.subscribe((loginReducers));

Вместо того, чтобы распечатывать ваше состояние редуктора, вы выполняете функцию редуктора. Subscribe сработает каждый раз, когда в вашем магазине происходят изменения. Действие фактически выполняется в первый раз, но так как вы вызываете loginReducers внутри subscribe, оно запускает функцию-редуктор и возвращает ошибку "cannot get type of undefined."

Вы получаете эту ошибку, потому что вы пытаетесь вызвать эту функцию без каких-либо действий, передаваемых в редуктор. Подписка выполняется так быстро, что создается впечатление, что ваше первоначальное действие не было выполнено.

Это объясняет, почему вы можете напечатать действие в первом console.log(), но затем получить неопределенное от второго. Второй console.log() происходит от подписки, пытающейся выполнить loginReducers, когда в нее не было передано никакого действия, возвращая undefined.

То, что вы хотите, это:

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

Вот ваша обновленная песочница для справки: https://stackblitz.com/edit/react-zjywof

Теперь у вас не должно быть ошибок при доступе к типу действия.