调度时React Redux设置空值

时间:2017-02-08 08:53:43

标签: javascript reactjs redux state react-redux

嘿,我的反应项目有问题。实际上我想提交一个表单并将表单数据写入redux商店。问题是:当我提交表单时,会调用调度函数,但不会在商店中写入值...

这是我的表单组件:

import React from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';
import axios from 'axios';
import JsonTable from 'react-json-table';

//Redux functions
import { setUsername, setPassword, setId, setEmail, setFirstname, setLastname, setPosts } from '../actions/userActions';

@connect(({user}) => {
  return {
    user: user.user,
  }
})
class RegistrationForm extends React.Component{

  constructor(){
    super();
  }

  handleFormSubmit(){
    if(this.refs.password.value === this.refs.password2.value){

      this.props.dispatch((dispatch) => {
        dispatch(setUsername(this.refs.username.value));
        dispatch(setPassword(this.refs.password.value));
        dispatch(setEmail(this.refs.email.value));
        dispatch(setFirstname(this.refs.firstname.value));
        dispatch(setLastname(this.refs.lastname.value));
      });
      console.log(this.props.user);
     //axios.put('/user', this.props.user);
    }else{
      console.log('Please repeat your password!');
    }
  }

  componentWillMount(){

  }

  render(){
    return(
      <form onSubmit={this.handleFormSubmit.bind(this)}>
      <h2>Registration</h2>
        <label>
          <input type="text" defaultValue="brotasco" size="200px" placeholder="Username" ref="username" required/>
        </label><br/>
        <label>
          <input type="password" defaultValue="brotasco" size="200px" placeholder="Password" ref="password" required/>
        </label><br/>
        <label>
          <input type="password" defaultValue="brotasco" size="200px" placeholder="Repeat Password" ref="password2" required/>
        </label><br/>
        <label>
          <input type="text" size="200px" defaultValue="Mario" placeholder="Firstname" ref="firstname" required/>
        </label><br/>
        <label>
          <input type="text" size="200px" defaultValue="Maeder" placeholder="Lastname" ref="lastname" required/>
        </label><br/>
        <label>
          <input type="email" size="200px" defaultValue="brotasco@gmail.com" placeholder="Email" ref="email" required/>
        </label><br/>
        <input type="submit" value="Submit"/>
      </form>
    );
  }

}

export default RegistrationForm;

这里是我的减速机:

export default function reducer(state={
  user: {
    userid: null,
    username: null,
    password: null,
    email: null,
    firstname: null,
    lastname: null,
    posts: null,
  }
}, action){
  switch(action.type) {
    case 'SET_USERNAME':{
     return {
       ...state, 
       user: {...state.user, username: action.payload}
      }
    }
    case 'SET_PASSWORD':{
       return{
        ...state, 
        user: {...state.user, password: action.payload}
       }
    }
    case 'SET_ID':{
       return{
        ...state, 
        user: {...state.user, userid: action.payload}
       }
    }
    case 'SET_EMAIL':{
       return{
        ...state, 
        user: {...state.user, email: action.payload}
       }
    }
    case 'SET_FIRSTNAME':{
       return{
        ...state, 
        user: {...state.user, firstname: action.payload}
       }
    }
    case 'SET_LASTNAME':{
       return{
        ...state, 
        user: {...state.user, lastname: action.payload}
       }
    }
    case 'SET_POSTS':{
       return{
        ...state, 
        user: {...state.user, posts: action.payload}
       }
    }
    case 'SET_USER':{
      return { ...state, user: action.payload}
    }
  }

  return state
}

如果有人能帮助我会很棒:)。

0 个答案:

没有答案