Redux Form Simple Fields

Question

I have a simple Redux Form and tried to follow the example given here https://redux-form.com/6.2.0/docs/GettingStarted.md/ here is my code

user-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;

Above Form is rendered by a UserPage Container user-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);

My Form successfully renders and I can see all the actions being dispatched inside the Redux Dev tools window, but when I try to enter text into the fields it won't do any thing, however the actions are dispatched like I said.

Sorry if this sounds a very basic question. I am relatively new to React and Redux and for that matter to Javascript.

Answer 1

In order to make redux form work, its reducer needs to be included and I forgot to include one, this fixed my issue.

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

    const allReducers = combineReducers({
        form: formReducer,

    });

    export default allReducers;