Redux Form - Simple Form Example

README.md

Redux Form - Simple Form Example

The original example is here: Redux Form - Simple Form Example

How to Run the Dev Server

./cra-script.sh
cd redux-form-simple
yarn run start

App.js

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

const store = createStore(reducer);

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

  submit(values) {
    this.setState({debug: JSON.stringify(values)});
  }

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

export default App;

cra-script.sh

#!/bin/bash

NAME=redux-form-simple

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-getting-started",
  "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.1"
  },
  "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"
  }
}

reducers.js

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

const rootReducer = combineReducers({
  // ...your other reducers here
  // you have to pass formReducer under 'form' key,
  // for custom keys look up the docs for 'getFormState'
  form: formReducer
});

export default rootReducer;

SimpleForm.js

import React from 'react';
import { Field, reduxForm } from 'redux-form';
import {
  Form, FormGroup, FormControl,
  InputGroup,
  Button
} from 'react-bootstrap';

const renderTextField = ({ input, name, label, type }) => (
  <FormGroup>
    <InputGroup>
      <InputGroup.Addon>{label}</InputGroup.Addon>
      <FormControl
        {...input}
        name={name}
        placeholder={label}
        type={type}
      />
    </InputGroup>
  </FormGroup>
);

let SimpleForm = props => {
  const { handleSubmit, pristine, reset, submitting } = props;
  return (
    <Form onSubmit={handleSubmit}>

      <Field
        name="firstName"
        label="First Name"
        type="text"
        component={renderTextField} />

      <Field
        name="lastName"
        label="Last Name"
        type="text"
        component={renderTextField} />

      <Field
        name="email"
        label="email"
        type="email"
        component={renderTextField} />

      <FormGroup>
        <label>Sex{' '}</label>
        <label>
          <Field
            name="sex"
            type="radio"
            value="male"
            component="input"
          />{' '}
          Male
        </label>
        <label>
          <Field
            name="sex"
            type="radio"
            value="female"
            component="input"
          />{' '}
          Female
        </label>
      </FormGroup>

      <FormGroup>
        <label>Favorite Color</label>
        <Field name="favoriteColor" component="select" >
          <option />
          <option value="ff0000">Red</option>
          <option value="00ff00">Green</option>
          <option value="0000ff">Blue</option>
        </Field>
      </FormGroup>

      <FormGroup>
        <label>
          <Field
            name="employed"
            id="employed"
            component="input"
            type="checkbox" />
          Employed
        </label>
      </FormGroup>

      <FormGroup>
        <InputGroup>
          <InputGroup.Addon>Notes</InputGroup.Addon>
          <Field
            name="notes" component="textarea" rows="10"
            style={{width: "100%"}} />
        </InputGroup>
      </FormGroup>

      <div>
        <Button bsStyle="primary" type="submit"
          disabled={pristine || submitting}>
          Submit
        </Button>
        <Button bsStyle="default" type="button"
          disabled={pristine || submitting} onClick={reset}>
          Clear Values
        </Button>
      </div>
    </Form>
  );
};

SimpleForm = reduxForm({
  form: 'simple' // a unique identifier for this form
})(SimpleForm);

export default SimpleForm;