Redux Form - Initializing From State

README.md

Redux Form - Initializing From State

The original example: Redux Form - Initializing From State

account.js

// Quack! This is a duck. https://github.com/erikras/ducks-modular-redux
const LOAD = 'redux-form-examples/account/LOAD'

const reducer = (state = {}, action) => {
  switch (action.type) {
    case LOAD:
      return {
        data: action.data
      }
    default:
      return state
  }
}

/**
 * Simulates data loaded into this reducer from somewhere
 */
export const load = data => ({ type: LOAD, data })

export default reducer

App.js

import React from 'react';
import InitializeFromStateForm from './InitializeFromStateForm';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import reducer from './reducer';
import "bootstrap/dist/css/bootstrap.css";

const store = createStore(reducer);

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {debug: ''};
  }

  handleSubmit(values) {
    const self = this;
    self.setState({debug: JSON.stringify(values)});
  }

  render() {
    const onSubmit = this.handleSubmit.bind(this);
    return (
      <Provider store={store}>
        <div>
          <InitializeFromStateForm onSubmit={onSubmit} />
          <div>
            <pre>{this.state.debug}</pre>
          </div>
        </div>
      </Provider>
    );
  }
}

export default App;

cra-script.sh

#!/bin/bash

NAME=redux-form-initialize-from-state

echo -n "This script runs create-react-app $NAME. Proceed? (Y/N) "
read YN
if [ x$YN != xY ]
then
  echo "Bye."
  exit
fi

# Delete this line only if you are sure what is done from this line on.
exit

create-react-app $NAME
cd $NAME
cp -v ../package.json .
cd src
rm -f App.* logo.svg
cp -v ../../*.js .
cd ..
yarn install

echo 'To launch the dev server, run `yarn run start`.'

InitializeFromStateForm.js

import React from 'react'
import { connect } from 'react-redux'
import { Field, reduxForm } from 'redux-form'
import { load as loadAccount } from './account'
import {
  Form, FormGroup,
  Button
} from 'react-bootstrap'

const data = {
  // used to populate "account" reducer when "Load" is clicked
  firstName: 'Jane',
  lastName: 'Doe',
  age: '42',
  sex: 'female',
  employed: true,
  favoriteColor: 'Blue',
  bio: 'Born to write amazing Redux code.'
}
const colors = ['Red', 'Orange', 'Yellow', 'Green', 'Blue', 'Indigo', 'Violet']

let InitializeFromStateForm = props => {
  const { handleSubmit, load, pristine, reset, submitting } = props
  return (
    <Form onSubmit={handleSubmit}>
      <div>
        <Button type="button" bsStyle="default" onClick={() => load(data)}>
          Load Account
        </Button>
      </div>
      <FormGroup>
        <label>First Name</label>
        <div>
          <Field
            name="firstName"
            component="input"
            type="text"
            placeholder="First Name"
          />
        </div>
      </FormGroup>
      <FormGroup>
        <label>Last Name</label>
        <div>
          <Field
            name="lastName"
            component="input"
            type="text"
            placeholder="Last Name"
          />
        </div>
      </FormGroup>
      <FormGroup>
        <label>Age</label>
        <div>
          <Field name="age" component="input" type="number" placeholder="Age" />
        </div>
      </FormGroup>
      <FormGroup>
        <label>Sex</label>
        <div>
          <label>
            <Field
              name="sex"
              component="input"
              type="radio"
              value="male"
            />{' '}
            Male
          </label>
          <label>
            <Field
              name="sex"
              component="input"
              type="radio"
              value="female"
            />{' '}
            Female
          </label>
        </div>
      </FormGroup>
      <FormGroup>
        <label>Favorite Color</label>
        <div>
          <Field name="favoriteColor" component="select">
            <option value="">Select a color...</option>
            {colors.map(colorOption => (
              <option value={colorOption} key={colorOption}>
                {colorOption}
              </option>
            ))}
          </Field>
        </div>
      </FormGroup>
      <FormGroup>
        <label htmlFor="employed">Employed</label>
        <div>
          <Field
            name="employed"
            id="employed"
            component="input"
            type="checkbox"
          />
        </div>
      </FormGroup>
      <FormGroup>
        <label>Bio</label>
        <div>
          <Field name="bio" component="textarea" />
        </div>
      </FormGroup>
      <FormGroup>
        <Button type="submit" bsStyle="primary"  disabled={pristine || submitting}>
          Submit
        </Button>
        <Button type="button" bsStyle="default" disabled={pristine || submitting} onClick={reset}>
          Undo Changes
        </Button>
      </FormGroup>
    </Form>
  )
}

// Decorate with reduxForm(). It will read the initialValues prop provided by connect()
InitializeFromStateForm = reduxForm({
  form: 'initializeFromState' // a unique identifier for this form
})(InitializeFromStateForm)

// You have to connect() to any reducers that you wish to connect to yourself
InitializeFromStateForm = connect(
  state => ({
    initialValues: state.account.data // pull initial values from account reducer
  }),
  { load: loadAccount } // bind account loading action creator
)(InitializeFromStateForm)

export default InitializeFromStateForm

package.json

{
  "name": "redux-form-initialize-from-state",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bootstrap": "^3.3.7",
    "react": "^16.0.0",
    "react-bootstrap": "^0.31.5",
    "react-dom": "^16.0.0",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",
    "redux-form": "^7.1.2"
  },
  "devDependencies": {
    "react-scripts": "1.0.14"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

reducer.js

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

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

export default rootReducer;