Resources:

Redux Form

Instruction:

Install package:

install --save [email protected]

Then go to the index.js reducer and import a reducer from it

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

Then add it to combineReducers object

import { combineReducers } from 'redux';
import { reducer as formReducer} from 'redux-form';
import PostReducer from './reducer_posts'

const rootReducer = combineReducers({
    posts: PostReducer,
    form: formReducer
});

export default rootReducer;

After that we should move to our component, which should become a form soon:

import React, {Component} from 'react';


class PostsNew extends Component {
    render() {
        return (
            <div>
                PostsNew!
            </div>
        );
    }
}

export default PostsNew;

We need to import Field and reduxForm from redux-form package

import {Field, reduxForm} from 'redux-form'

And then we should export form's name, which should be unique:

export default reduxForm({
    form: 'PostsNewForm'
})(PostsNew);

Then, we should specify form in render():

render() {
    return (
        <form>
            <Field
                name="title"
                component={}
            />
        </form>
    );
}

So, now we should pass a specific component to the component property here:

renderTitleField(field){
    return(
        <div>
            <input
                type="text"
                {...field.input}
            />
        </div>
    );
};
render() {
    return (
        <form>
            <Field
                name="title"
                component={this.renderTitleField}
            />
        </form>
    );
}

Some styling:

renderTitleField(field){
    return(
        <div className="form-group">
            <label>Title</label>
            <input
                className="form-control"
                type="text"
                {...field.input}
            />
        </div>
    );
};

Now let's add second field:

class PostsNew extends Component {

    renderTitleField(field){
        return(
            <div className="form-group">
                <label>Title</label>
                <input
                    className="form-control"
                    type="text"
                    {...field.input}
                />
            </div>
        );
    };

    renderTagsField(field){
        return(
            <div className="form-group">
                <label>Tags</label>
                <input
                    className="form-control"
                    type="text"
                    {...field.input}
                />
            </div>
        );
    };
    render() {
        return (
            <form>
                <Field
                    name="title"
                    component={this.renderTitleField}
                />
                <Field
                    name="tags"
                    component={this.renderTagsField}
                />

            </form>
        );
    }
}

The problem here is that we repeat ourself now.

We should generalize those two methods into one:

renderField(field){
    return(
        <div className="form-group">
            <label>Title</label>
            <input
                className="form-control"
                type="text"
                {...field.input}
            />
        </div>
    );
};

render() {
    return (
        <form>
            <Field
                name="title"
                component={this.renderField}
            />
            <Field
                name="tags"
                component={this.renderField}
            />

        </form>
    );
}

But we have a problem again - the same label.

To fix this we should add label property to fields:

render() {
    return (
        <form>
            <Field
                label="Title"
                name="title"
                component={this.renderField}
            />
            <Field
                label="Tags"
                name="tags"
                component={this.renderField}
            />

        </form>
    );
}

And we should retreive them in function:

renderField(field){
    return(
        <div className="form-group">
            <label>{field.label}</label>
            <input
                className="form-control"
                type="text"
                {...field.input}
            />
        </div>
    );
};