Я могу получить доступ только к action, но не к action.type на моем редукторе.
Я попытался выполнить console.info(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.info('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);
это дает мне такой результат: zzZaction {type: "INPUT_EMAIL", email: "dg"}, за которым следует zzZaction undefined
Не используйте setState внутри обработчика onChange, если email и password передаются через mapStateToProps и обновляются через диспетчеризацию.
Вы используете TypeScript или JavaScript?
@Фёдор Джаваскрипт
Как это работает? function loginReducers(state = initialState, action: Object) Эта сигнатура функции недействительна в JS.
Сгенерируйте репродукцию в stackblitz, будет проще отлаживать.
@RajendranNadar stackblitz.com/edit/react-plq56z вот оно
@GabrielleDurano только что написала вам ответ! Дайте мне знать, если это поможет :)





Проблема здесь:
store.subscribe((loginReducers));
Вместо того, чтобы распечатывать свое состояние редуктора, вы выполняете функцию редуктора. Subscribe будет срабатывать каждый раз, когда в вашем магазине происходят изменения. На самом деле действие проходит с первого раза, но так как вы вызываете loginReducers внутри subscribe, оно запускает функцию редюсера и возвращает ошибку "cannot get type of undefined."
Вы получаете эту ошибку, потому что пытаетесь вызвать эту функцию без передачи каких-либо действий редюсеру. Подписка только что выполнена так быстро, что создается впечатление, что ваше первоначальное действие не было выполнено.
Это объясняет, почему вы можете напечатать действие в первомconsole.info(), но затем получить неопределенное значение во втором. Второй console.info() возникает из-за попытки подписки выполнить loginReducers, когда в нее не было передано никаких действий, возвращая неопределенное значение.
Что вы хотите, так это:
store.subscribe(() => console.info(store.getState()));
Вот ваша обновленная песочница для справки: https://stackblitz.com/edit/react-zjywof
Теперь у вас не должно быть ошибок при доступе к типу действия.
Что дает
console.info(action)?