Redux Форма Простых поля

Question

У меня есть простой Redux форма и пытался следовать примеру, приведенный здесь https://redux-form.com/6.2.0/docs/GettingStarted.md/ вот мой код

пользовательского form.js

import React from 'react'; 
import {Field, reduxForm} from 'redux-form'; 

class UserForm extends React.Component { 

    /** 
    * User Form goes here... 
    */ 
    render() { 
     const { handleSubmit } = this.props; 

     return (
      <form role="form" onSubmit={handleSubmit}> 
       <div className="box-body"> 
        <div className="form-group"> 
         <label htmlFor="name">Full Name</label> 
         <Field 
          name="name" 
          component="input" 
          type="text" 
          className="form-control" 
          placeholder="Enter full name..."/> 
        </div> 
        <div className="form-group"> 
         <label htmlFor="email">Email address</label> 
         <Field 
          name="email" 
          type="email" 
          component="input" 
          className="form-control" 
          placeholder="Enter email"/> 
        </div> 
        <div className="form-group"> 
         <label htmlFor="password">Password</label> 
         <Field 
          name="password" 
          type="password" 
          component="input" 
          className="form-control" 
          placeholder="Password"/> 
        </div> 

       </div> 
       <div className="box-footer"> 
        {/* <button type="submit" className="btn btn-primary">Save</button> */} 
        <button type="submit" className="btn btn-primary" value="Save">Save</button> 
       </div> 
      </form> 
     ); 
    } 
} 

UserForm = reduxForm({ 
    form: 'user' 
})(UserForm); 

export default UserForm; 

Вышеуказанной формы вынесенный UserPage Контейнер пользователем page.js

import React from 'react'; 

import Page from '../../page'; 
import UserForm from '../components/user-form'; 
import UserList from '../components/user-list'; 

import {bindActionCreators} from 'redux'; 
import {connect} from 'react-redux'; 
import UserAction from '../actions'; 

import {showLoading, hideLoading} from 'react-redux-loading-bar'; 


/** 
* We might want to create an Abstract Form component to 
* include all common form features. 
*/ 

class UserPage extends Page { 




    handleUserSubmit(values) { 
     console.log(values); 
    } 

    /** 
    * Content is loaded into page 
    */ 
    content() { 
     return (
      <div className="row"> 
       {/* left column */} 
       <div className="col-md-6"> 
        {/* general form elements */} 
        <div className="box box-primary"> 
         <div className="box-header with-border"> 
          <h3 className="box-title">New User</h3> 
         </div> 
         {/* /.box-header */} 
         <UserForm onSubmit={this.handleUserSubmit}/> 
        </div> 
        {/* /.box */} 

       </div> 
       {/*/.col (left) */} 
       {/* right column */} 
       <div className="col-md-6"> 
        {/* UserList made of <User /> */} 

        {this.userList()} 
        {/* /.box */} 
       </div> 
       {/*/.col (right) */} 
      </div> 
     ); 
    } 


} 

const mapStateToProps = (state) => ({ //this gets state from reducer and maps to props 

      users: state.userList.users, 
      fetched: state.userList.fetched, 
      error: state.userList.error 

}); 


const mapDispatchToProps = (dispatch) => ({ 
    actions: bindActionCreators({ 
     dispatchShowLoading: showLoading, 
     dispatchHideLoading: hideLoading, 
     dispatchUserList: UserAction.userList 
    }, dispatch) 
}); 


export default connect(mapStateToProps, mapDispatchToProps)(UserPage); 

Моя форма успешно отображает, и я вижу все действия, отправленные в окне инструментов Redux Dev, но когда я пытаюсь ввести текст в поля, он ничего не сделает, однако действия отправляются, как я уже сказал.

Извините, если это звучит очень простой вопрос. Я относительно новичок в React и Redux и в этом отношении для Javascript.

Answer 1

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

import { reducer as formReducer } from 'redux-form'; 

    const allReducers = combineReducers({ 
     form: formReducer, 

    }); 

    export default allReducers;