Reactjs 表单提交后未更新Redux状态

我试图让react表单的输入值更新redux存储区的userData状态。当我提交表格时，它只会给我一个错误 “TypeError:分派不是一个函数”。我是redux的新手，所以我肯定我错过了一些东西

哦，我使用的是duck文件模型，所以除了这些文件之外，还有一个主减速器文件，它将这个减速器导入到存储中，所以我没有忘记这一点

文件结构图

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
}

reducers.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.log('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;

import React，{Component}来自'React'；
从'react router dom'导入{NavLink}；
类寄存器扩展组件{
构造函数（）{
超级（）；
此.state={
nameVal:“”，
emailVal:“”，
passVal:“”，
pass2Val:'
};
}
handleSubmit=（e）=>{
e、 预防默认值（）；
console.log（'Hey'）；
this.props.registerUser（）；
}
渲染（道具）{
//const{nameVal，emailVal，passVal，pass2Val}=this.state；
返回(
登记
全名
this.setState（{nameVal:e.target.value}）}/>

电子邮件
this.setState（{emailVal:e.target.value}）}/>

密码
this.setState（{passVal:e.target.value}）}/>

重复密码
this.setState（{pass2Val:e.target.value}）}/>

给我报名参加时事通讯
或者使用任何社交网络登录
使用Facebook登录
使用LinkedIn登录
);
}
}
导出默认寄存器；

应该是

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,
};

编辑

代码中还有一个bug：

const register = (userData) => {
    type: types.REGISTER
    payload: userData
};

。。。想想看：）

你没有返回任何东西，因为它实际上是不正确的语法（奇怪的是，你的代码编辑器没有发出任何警告）。通过返回一个对象来修复它：

const register = (userData) => ({
    type: types.REGISTER
    payload: userData
});

应该是

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,
};

编辑

代码中还有一个bug：

const register = (userData) => {
    type: types.REGISTER
    payload: userData
};

。。。想想看：）

你没有返回任何东西，因为它实际上是不正确的语法（奇怪的是，你的代码编辑器没有发出任何警告）。通过返回一个对象来修复它：

const register = (userData) => ({
    type: types.REGISTER
    payload: userData
});

---

感谢您修复了该错误：D遗憾的是，它显示了一个带有“TypeError:无法读取未定义属性'type'的新错误”的错误。您认为我的trypes设置不正确吗？感谢您修复了该错误：D遗憾的是，它显示了一个带有“TypeError:无法读取未定义属性'type'的新错误”你认为我的胰蛋白酶设置不正确吗？