redux-form.md

Redux Form

Components are included with @deskpro/react-components which bind the form components to React Redux and Redux Form. This document covers installing the required dependencies and creating a simple form.

Setup

Installing dependencies

npm install --save @deskpro/react-components react-redux redux-form

Setup the reducer

Create the root reducer per the Redux Form documentation.

// reducers/rootReducer.js

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

const rootReducer = combineReducers({
  form
});

export default rootReducer;

Create the form

The form elements exported by @deskpro/react-components/bindings/redux-form are Redux Form Field components which are bound to deskpro-component form components. Each form must be wrapped with the Form component, which requires a name prop. The name of each form must be unique to the application. The form values will be saved in the Redux store using the given name, e.g. form.account.

The onSubmit prop receives the submitted form values as an object of key/value pairs. For example { username: 'foo', password: 'bar', bio: 'This is my bio' }.

// AccountForm.jsx

import React from 'react';
import { Form, Button, Input, Textarea } from '@deskpro/react-components/bindings/redux-form';

class AccountForm extends React.Component {
  handleSubmit = (values) => {
      console.log(values);
  };

  render() {
    return (
      <Form name="account" onSubmit={this.handleSubmit}>
        <Input 
          name="username"
          label="Username"
        />
        <Input 
          name="password"
          type="password"
          label="Password"
        />
        <Textarea
          name="bio"
          label="Bio"
        />
        <Button type="primary">
          Save
        </Button>
      </Form>
    );
  }
}

Render the form

Create your store and render the form using the react-redux Provider component.

// App.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import rootReducer from 'reducers/rootReducer';
import AccountForm from './AccountForm';

const App = () => (
    <AccountForm />
);

const store = createStore(
    rootReducer
);

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('mount')
);

Validators

Form values are validated by passing one or more functions to the form fields. Developers may write their own and/or use the validators provided by the deskpro-component bindings.

import React from 'react';
import { Form, Button, Input, Textarea, validators } from '@deskpro/react-components/bindings/redux-form';

const AccountForm = () => (
  <Form name="account">
    <Input 
      name="username"
      label="Username"
      validate={[validators.required, validators.alphaNumeric]}
    />
    <Input 
      name="password"
      type="password"
      label="Password"
      validate={[validators.required, validators.minLength(8)]}
    />
    <Textarea
      name="bio"
      label="Bio"
      validate={validators.maxLength(500)}
    />
    <Button type="primary">
      Save
    </Button>
  </Form>
);

The following validators are including with the bindings.

• required - Validate the given value is not empty
• maxLength - Validates the input value contains fewer than max characters
• minLength - Validates the input value contains more than min characters
• alphaNumeric - Validates the input value only contains alpha-numeric characters
• alpha - Validates the input value only contains alpha characters
• numeric - Validates the input value only contains numeric characters
• email - Validates the input value is a valid email address
• regexp - Validates that the input value matches against the given regular expression

Validators are simple functions which receive the form value, and return undefined when the value passes validation, or a string containing an error message when validation fails.

import React from 'react';
import { Form, Input } from '@deskpro/react-components/bindings/redux-form';

const tooOld = (value) => {
  return (value && value > 65)
    ? 'You might be too old for this'
    : undefined;
};

const AccountForm = () => (
  <Form name="account">
    <Input 
      name="age"
      label="Age"
      validate={tooOld}
    />
  </Form>
);