Get started with redux-form CDN

MIT licensed

Redux-form is a popular library that connects Redux forms and Redux, simplifying form handling in Redux applications.

Tags:

react
reactjs
flux
redux
react-redux
redux-form
form
decorator

Stable version

https://cdn.cdnhub.io/redux-form/8.3.10/redux-form.min.js Copied!

How to start using redux-form CDN


import React from 'react';
import { Form, Field } from 'redux-form';
import { createStore, combineReducers } from 'redux';
import { reduxForm, FieldArray, formValueSelector } from 'redux-form';

const initialFormValues = {
  name: '',
  hobbies: [{ hobby: '' }],
};

const formReducer = (state = initialFormValues, action) => {
  switch (action.type) {
    case 'ADD_HOBBY':
      return {
        ...state,
        hobbies: state.hobbies.concat({ hobby: '' }),
      };
    case 'REMOVE_HOBBY':
      return {
        ...state,
        hobbies: state.hobbies.filter((hobby, index) => index !== action.index),
      };
    default:
      return state;
  }
};

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

const store = createStore(rootReducer);

const selector = formValueSelector('form');

const AddHobbyForm = ({ push }) => (
  <Form name="form" onSubmit={(formProps) => push('/submitted')}>
    {({ handleSubmit, values, push }) => (
      <form onSubmit={handleSubmit}>
        <Field name="name" component="input" type="text" />
        <FieldArray name="hobbies">
          {({ push, remove }) => (
            <div>
              {values.hobbies.map((hobby, index) => (
                <div key={index}>
                  <Field name={`hobbies[${index}].hobby`} component="input" type="text" />
                  <button type="button" onClick={() => remove(index)}>Remove</button>
                </div>
              ))}
              <button type="button" onClick={() => push({ type: 'ADD_HOBBY' })}>Add Hobby</button>
            </div>
          )}
        </FieldArray>
        <button type="submit">Submit</button>
      </form>
    )}
  </Form>
);

export default AddHobbyForm;

store.dispatch({ type: 'ADD_HOBBY' });

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

Select version:

https://cdn.cdnhub.io/redux-form/8.3.10/redux-form.js Copied!

https://cdn.cdnhub.io/redux-form/8.3.10/redux-form.min.js Copied!

https://cdn.cdnhub.io/redux-form/8.3.10/redux-form.min.js.map Copied!

All versions