Я пытаюсь сделать так, чтобы входные значения формы реакции обновляли состояние хранилища redux для userData. Когда я отправляю форму, я получаю сообщение об ошибке «TypeError: отправка не является функцией». Я новичок в redux, поэтому уверен, что что-то упускаю.
Да, и я использую модель утиного файла, поэтому в дополнение к этим файлам есть главный файл-редуктор, который импортирует этот редуктор в магазин, поэтому я не забыл об этом.
Структура файла Рис.
types.js
const REGISTER = 'REGISTER';
export default {
REGISTER
}
actions.js
import types from './types.js';
const register = (userData) => {
type: types.REGISTER
payload: userData
};
export default {
register
}
operations.js
import Creators from './actions';
const register = Creators.register;
export default {
register
}
redurs.js
import types from './types';
const initialState = {
isLoggedIn: false,
userData: {}
}
const registrationReducer = (state = initialState, action) => {
switch(action.type) {
case types.REGISTER: {
return {
...state,
isLoggedIn: true,
userData: action.payload
}
}
default: return state;
}
}
export default registrationReducer;
index.js
import registrationReducer from './reducers';
export { default as registrationOperations } from './operations';
export default registrationReducer;
Контейнер компонента регистрации
import { connect } from 'react-redux';
import Registration from './Registration';
import { registrationOperations } from './duck';
const mapDispatchToProps = (dispatch) => {
const registerUser = () => {
dispatch(registrationOperations.register())
};
return { registerUser };
};
const RegistrationContainer = connect(
mapDispatchToProps
)(Registration);
export default RegistrationContainer;
Компонент регистрации
import React, {Component} from 'react';
import {NavLink} from 'react-router-dom';
class Register extends Component {
constructor() {
super();
this.state = {
nameVal: '',
emailVal: '',
passVal: '',
pass2Val: ''
};
}
handleSubmit = (e) => {
e.preventDefault();
console.info('Hey');
this.props.registerUser();
}
render(props) {
// const { nameVal, emailVal, passVal, pass2Val } = this.state;
return (<div className='user-form-wrapper'>
<div className='register-form-container'>
<h1 className='form-title'>Register</h1>
<form onSubmit = {this.handleSubmit} className='register-form'>
<div className='register-form-column'>
<label className='input-label' htmlFor='full-name'>Full Name</label>
<input type='text' name='FullName' autoCorrect='off' autoCapitalize='off' spellCheck='false' value = {this.state.nameVal} onChange = {(e) => this.setState({ nameVal: e.target.value })}/><br/>
<label className='input-label' htmlFor='E-mail'>E-mail</label>
<input type='text' name='E-mail' autoCorrect='off' autoCapitalize='off' spellCheck='false' value = {this.state.emailVal} onChange = {(e) => this.setState({ emailVal: e.target.value })}/><br/>
<label className='input-label' htmlFor='Password'>Password</label>
<input type='password' name='Password' autoCorrect='off' autoCapitalize='off' spellCheck='false' value = {this.state.passVal} onChange = {(e) => this.setState({ passVal: e.target.value })}/><br/>
<label className='input-label' htmlFor='RepeatPassword'>Repeat Password</label>
<input type='password' name='password-repeat' autoCorrect='off' autoCapitalize='off' spellCheck='false' value = {this.state.pass2Val} onChange = {(e) => this.setState({ pass2Val: e.target.value })}/><br/>
<label className='checkmark-container'>Sign me up for newsletter
<input type='checkbox' name='newsletter'/>
<span className='checkmark'></span>
</label>
<button type='submit' value='submit' className='form-submit'>
</button>
</div>
<div className='register-form-column'>
<h6>Or log in using any of the social networks</h6>
<button className='socialBtn socialBtn--facebook'>
Login with Facebook
</button>
<button className='socialBtn socialBtn--linkedIn'>
Login with LinkedIn
</button>
</div>
</form>
</div>
</div>);
}
}
export default Register;





mapDispatchToProps должен быть вторым аргументом функции connect:
const mapDispatchToProps = (dispatch) => {
const registerUser = () => {
dispatch(registrationOperations.register())
};
return { registerUser };
};
const RegistrationContainer = connect(
null,
mapDispatchToProps
)(Registration);
export default RegistrationContainer;
Подсказка: если аргументы совпадают, вы можете просто передать объект конфигурации:
const mapDispatchToProps = {
registerUser: registrationOperations.register,
};
РЕДАКТИРОВАТЬ
В коде есть еще одна ошибка:
const register = (userData) => {
type: types.REGISTER
payload: userData
};
... подумай об этом :)
Вы ничего не возвращаете, это на самом деле неправильный синтаксис (странно, что ваш редактор кода не выдал никакого предупреждения). Исправьте это, вернув объект:
const register = (userData) => ({
type: types.REGISTER
payload: userData
});
Спасибо, что исправили эту ошибку: D, к сожалению, обнаружилась новая с «TypeError: Cannot read property 'type' of undefined», как вы думаете, я неправильно настроил свои попытки?