Redux Form - Selecting Form Values Example

README.md

Redux Form - Selecting Form Values Example

The original example: Redux Form - Selecting Form Values Example

App.js

import React from 'react';
import SelectingFormValuesForm from './SelectingFormValuesForm';
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>
          <SelectingFormValuesForm onSubmit={onSubmit} />
          <div>
            <pre>{this.state.debug}</pre>
          </div>
        </div>
      </Provider>
    );
  }
}

export default App;

cra-script.sh

#!/bin/bash

NAME=redux-form-selecting-form-values

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`.'

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';

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

export default rootReducer;

SelectingFormValuesForm.js

import React from 'react'
import { connect } from 'react-redux'
import { Field, reduxForm, formValueSelector } from 'redux-form'
import {
  Form, FormGroup,
  Row, Col,
  Button
} from 'react-bootstrap'

let SelectingFormValuesForm = props => {
  const {
    favoriteColorValue,
    fullName,
    handleSubmit,
    hasEmailValue,
    pristine,
    reset,
    submitting
  } = props
  return (
    <Form onSubmit={handleSubmit}>
      <FormGroup>
        <Row>
          <Col sm={2}>
            <label>First Name</label>
          </Col>
          <Col sm={8}>
            <Field
              name="firstName"
              component="input"
              type="text"
              size="40"
              placeholder="First Name"
            />
          </Col>
        </Row>
      </FormGroup>
      <FormGroup>
        <Row>
          <Col sm={2}>
            <label>Last Name</label>
          </Col>
          <Col sm={8}>
            <Field
              name="lastName"
              component="input"
              type="text"
              placeholder="Last Name"
            />
          </Col>
        </Row>
      </FormGroup>
      <FormGroup>
        <Row>
          <Col sm={2}>
            <label htmlFor="hasEmail">Has Email?</label>
          </Col>
          <Col sm={8}>
            <Field
              name="hasEmail"
              id="hasEmail"
              component="input"
              type="checkbox"
            />
          </Col>
        </Row>
      </FormGroup>
      {hasEmailValue && (
        <FormGroup>
          <Row>
            <Col sm={2}>
              <label>Email</label>
            </Col>
            <Col sm={8}>
              <Field
                name="email"
                component="input"
                type="email"
                placeholder="Email"
              />
            </Col>
          </Row>
        </FormGroup>
      )}
      <FormGroup>
        <Row>
          <Col sm={2}>
            <label>Favorite Color</label>
          </Col>
          <Col sm={8}>
            <Field name="favoriteColor" component="select">
              <option />
              <option value="#ff0000">Red</option>
              <option value="#00ff00">Green</option>
              <option value="#0000ff">Blue</option>
            </Field>
          </Col>
        </Row>
      </FormGroup>
      {favoriteColorValue && (
        <div
          style={{
            height: 80,
            width: 200,
            margin: '10px auto',
            backgroundColor: favoriteColorValue
          }}
        />
      )}
      <div>
        <Button type="submit" bsStyle="primary"
          disabled={pristine || submitting}>
          Submit {fullName}
        </Button>
        <Button type="button" bsStyle="default"
          disabled={pristine || submitting} onClick={reset}>
          Clear Values
        </Button>
      </div>
    </Form>
  )
}

// The order of the decoration does not matter.

// Decorate with redux-form
SelectingFormValuesForm = reduxForm({
  form: 'selectingFormValues' // a unique identifier for this form
})(SelectingFormValuesForm)

// Decorate with connect to read form values
const selector = formValueSelector('selectingFormValues') // <-- same as form name
SelectingFormValuesForm = connect(state => {
  // can select values individually
  const hasEmailValue = selector(state, 'hasEmail')
  const favoriteColorValue = selector(state, 'favoriteColor')
  // or together as a group
  const { firstName, lastName } = selector(state, 'firstName', 'lastName')
  return {
    hasEmailValue,
    favoriteColorValue,
    fullName: `${firstName || ''} ${lastName || ''}`
  }
})(SelectingFormValuesForm)

export default SelectingFormValuesForm