Redux React Form

A simple way to validate a form using Redux and React. Form errors are available as state to anybody who cares to use them. Everyone loves their UI framework so we are not re-creating the wheel by creating our own form elements. All that you have to do is wrap you formFields in a react element that expects certain props and knows how to set valid/invalid state of the form field. That and the few other steps you need to do to integrate us into your app are detailed below!

Demo at http://helpdotcom.github.io/redux-react-form/

Dependencies

Our only peer dependencies are Redux, React and validate.js plus you can use your favorite build system.

Why re-create a library for validation of this one is perfectly suited to validate in whichever format you want. It can do composite validation, custom validation and it has a bunch of built-ins.

Future

Even thought validate.js works for us it might not for everyone. In future releases we want to pass the validation library as an injection in the reducer similar to the below. As long as that validation library return an array of strings as errors per formData key all should work!

1function validateForm(state, action) {
2  const forms = Object.assign({}, state);
3  const form = forms[action.formID];
4  const errors = action.validate(action.formData, form.validationRules);
5  if (errors) {
6    form.errors = errors;
7  } else {
8    delete form.errors;
9  }
10  return forms;
11}

Installation

We currently support only npm so just install us as a dependency.

1npm install --save redux-react-form

Development

To contribute to us (we would love some feedback!) simply clone the Github repository and follow the step below.

1. Install dependencies

1npm install

2. Run us locally

1npm start

3. For any changes the only thing we require are tests (we use tape and sinon). The tests will run locally in a headless browser. We don't have a test runner yet but we would gladly accept a pull request that provides one.

1npm run test

Integration

At the end of the day all we are is some actions, a reducer and a form component. We chose this path so that we could met everyone's needs without being opinionated as to what framework to use.

Our npm package exports those three items like such.

1import { FormComponent, formActions, formReducer } from 'redux-react-form';

Step 1

You need to add the reducer into your combineReducers function with the key formValidator like so;

1import { formReducer } from 'redux-react-form';
2
3const reducer = combineReducers({
4  forms: formReducer,
5  ...
6});
7
8const store = createStore(reducer);

Step 2

Next you have to create a component that extends from FormComponent.

look at form1. A form needs to have a unique id, we are hard-coding in our example but we recommend using lodash uniqueId to accomplish this. If you do not provide a formID we will set one for you. You also need to write a mapStateToProps function to be the first parameter of the connect function. We did not want to do this for you since there might be multiple state locations the component needs to get data from. Ours is simple:

1function select(state) {
2  return {
3    forms: state.forms,
4    //other state you care about
5    ...
6  };
7}

Load the rules you want to use for the form, since your form is connected (smart component), you can you dispatch a load constraints event in componentDidMount like below. Rules are form-bound and are not shared across forms.

1componentWillMount(...args) {
2  super.componentWillMount(...args);
3  this.dispatch(formActions.loadValidationRules(this.formID, registrationRules));
4}

If you want to know from your form component when formData state has been updated just create onFormFieldChanged method, yay!

onFormFieldChanged() {
  //do something or the other
  ...
}

Step 3

For the form fields in your form component you need to use formFieldProps to pass the necessary props to down.

1<Input floatingLabelText="Username" hintText="Enter your username" {...this.formFieldProps('username')}/>

The first argument is the ref that will be passed to the form field. An optional parameter tells the form what prop to use to pass the value of the form field. These form fields will always be controlled, meaning that the parent (the form component) will be managing the value of the form field.

Creating a Form Field Wrapper

Our job is not to dictate what UI component framework to use but to help you validate your form. That's why wrapping those form fields is the easiest way to go about it. Sure it's kind of a pain but you only have to do it once. Also it allows you to create your own form fields without having to dump us.

Look at our form-field wrapper that essentially just renders a material input. Its only job really is to figure out how to render errors from it's errors prop, how to handle onChange and hookup onBlur and onFocus callbacks to the form field and that's it!

Browser Support

We will attempt to support the same browsers that React and Redux supports.

License

MIT