Состояние Redux не обновляется после отправки формы

Я пытаюсь сделать так, чтобы входные значения формы реакции обновляли состояние хранилища redux для userData. Когда я отправляю форму, я получаю сообщение об ошибке «TypeError: отправка не является функцией». Я новичок в redux, поэтому уверен, что что-то упускаю.

Да, и я использую модель утиного файла, поэтому в дополнение к этим файлам есть главный файл-редуктор, который импортирует этот редуктор в магазин, поэтому я не забыл об этом.

Структура файла Рис.

Состояние 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;
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
676
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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», как вы думаете, я неправильно настроил свои попытки?

cosmichero2025 27.03.2018 09:15

Другие вопросы по теме