Redux Form - Remote Submit Example

README.md

Redux Form - Remote Submit Example

The original example: Redux Form - Remote Submit Example

App.js

import React from 'react';
import RemoteSubmitForm from './RemoteSubmitForm';
import RemoteSubmitButton from './RemoteSubmitButton';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import reducer from './reducer';
import submit from './submit';
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;
    return submit(values).then((v) => {
      self.setState({debug: JSON.stringify(v)});
    });
  }

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

export default App;

cra-script.sh

#!/bin/bash

NAME=redux-form-remote-submit

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-selecting-form-values",
  "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;

RemoteSubmitButton.js

import React from 'react'
import { connect } from 'react-redux'
import { submit } from 'redux-form'
import { Button } from 'react-bootstrap'

const style = {
  padding: '10px 20px',
  width: 140,
  display: 'block',
  margin: '20px auto',
  fontSize: '16px'
}

const RemoteSubmitButton = ({ dispatch }) => (
  <Button
    type="button"
    style={style}
    bsStyle="primary"
    onClick={() => dispatch(submit('remoteSubmit'))}
  >
    Submit
  </Button>
)
//                                  ^^^^^^^^^^^^ name of the form

export default connect()(RemoteSubmitButton)

RemoteSubmitForm.js

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

const renderField = ({ input, label, type, meta: { touched, error } }) => (
  <FormGroup>
    <Row>
      <Col sm={2}>
        <label>{label}</label>
      </Col>
      <Col sm={8}>
        <input {...input} placeholder={label} type={type} size="32"/>
        {touched && error && <span>{error}</span>}
      </Col>
    </Row>
  </FormGroup>
)

const RemoteSubmitForm = props => {
  const { error, handleSubmit } = props
  return (
    <Form onSubmit={handleSubmit}>
      <Field
        name="username"
        type="text"
        component={renderField}
        label="Username"
      />
      <Field
        name="password"
        type="password"
        component={renderField}
        label="Password"
      />
      {error && <strong>{error}</strong>}
      <div>
        No submit button in the form. The submit button below is a separate
        unlinked component.
      </div>
    </Form>
  )
}

export default reduxForm({
  form: 'remoteSubmit' // a unique identifier for this form
  // onSubmit: submit // submit function must be passed to onSubmit
})(RemoteSubmitForm)

submit.js

import { SubmissionError } from 'redux-form'

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))

function submit(values) {
  return sleep(1000).then(() => {
    // simulate server latency
    if (!['john', 'paul', 'george', 'ringo'].includes(values.username)) {
      throw new SubmissionError({
        username: 'User does not exist',
        _error: 'Login failed!'
      })
    } else if (values.password !== 'redux-form') {
      throw new SubmissionError({
        password: 'Wrong password',
        _error: 'Login failed!'
      })
    } else {
      return values;
    }
  })
}

export default submit