Question

我试图使其反应形式的输入值正在更新用户数据的redux存储状态。当我提交表单时，它只是给我错误＆＃34; TypeError：dispatch不是函数＆＃34;。我是redux的新手，所以我确信我错过了一些东西。

哦，我正在使用duck文件模型，所以除了这些文件之外还有一个master reducer文件，可以将这个reducer导入到商店中，所以我没有忘记这一点。

文件结构图

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;

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

...想一想：）

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

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

表单提交后Redux状态不更新

1 个答案: