Add form example

README.md

@@ -16,6 +16,8 @@ Yet another example repository for redux-saga.
  + In-place editing and handle rejected XHR response
 + [TakeX](http://kuy.github.io/redux-saga-examples/takex.html)
  + Custom effect 'takex' accepts RegExp pattern of action types
++ [Form](http://kuy.github.io/redux-saga-examples/form.html)
+ + Integration with [redux-form](https://github.com/erikras/redux-form): Submit from redux-saga (based on [this solution](https://github.com/yelouafi/redux-saga/issues/161))
 
 ## Getting Started
 

form/actions.js

@@ -0,0 +1,8 @@
+import { createAction } from 'redux-actions';
+
+export const REQUEST_SUBMIT = 'REQUEST_SUBMIT';
+export const SUCCESS_SUBMIT = 'SUCCESS_SUBMIT';
+export const FAILURE_SUBMIT = 'FAILURE_SUBMIT';
+export const requestSubmit = createAction(REQUEST_SUBMIT);
+export const successSubmit = createAction(SUCCESS_SUBMIT);
+export const failureSubmit = createAction(FAILURE_SUBMIT);

form/app.js

@@ -0,0 +1,27 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import Form from './form';
+import { requestSubmit } from './actions';
+
+class App extends Component {
+  handleSubmit(values) {
+    return new Promise((resolve, reject) => {
+      this.props.dispatch(requestSubmit({ values, resolve, reject }));
+    });
+  }
+
+  render() {
+    return <div>
+      <h1>
+        <a href="https://github.com/kuy/redux-saga-examples/tree/master/form">Form</a> from <a href="https://github.com/kuy/redux-saga-examples">redux-saga-examples</a> by <a href="https://twitter.com/kuy">@kuy</a>
+      </h1>
+      <Form onSubmit={this.handleSubmit.bind(this)} />
+    </div>;
+  }
+}
+
+function select({ app }) {
+  return { app };
+}
+
+export default connect(select)(App);

form/form.js

@@ -0,0 +1,47 @@
+import React, { Component, PropTypes } from 'react'
+import { reduxForm } from 'redux-form'
+
+const fields = ['first', 'last'];
+
+class Form extends Component {
+  static get propTypes() {
+    return {
+      fields: PropTypes.object.isRequired,
+      handleSubmit: PropTypes.func.isRequired,
+      submitting: PropTypes.bool.isRequired
+    };
+  }
+
+  render() {
+    const {
+      fields: { first, last },
+      handleSubmit,
+      submitting
+    } = this.props;
+    return (<form onSubmit={handleSubmit}>
+        <div>
+          <label>First Name</label>
+          <div>
+            <input type="text" placeholder="First Name" {...first}/>
+          </div>
+        </div>
+        <div>
+          <label>Last Name</label>
+          <div>
+            <input type="text" placeholder="Last Name" {...last}/>
+          </div>
+        </div>
+        <div>
+          <button type="submit" disabled={submitting}>
+            {submitting ? <i/> : <i/>} Submit
+          </button>
+        </div>
+      </form>
+    )
+  }
+}
+
+export default reduxForm({
+  form: 'redux',
+  fields
+})(Form);

form/index.js

@@ -0,0 +1,12 @@
+import 'babel-polyfill';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
+import App from './app';
+import configureStore from './store';
+
+ReactDOM.render(
+  <Provider store={configureStore()}>
+    <App />
+  </Provider>,
+document.getElementById('container'));

form/reducers.js

@@ -0,0 +1,16 @@
+import { combineReducers } from 'redux';
+import { reducer as form } from 'redux-form';
+
+const initial = {
+  app: {}
+};
+
+function app(state = initial.app, { type, payload }) {
+  switch (type) {
+  }
+  return state;
+}
+
+export default combineReducers(
+  { app, form }
+);

form/sagas.js

@@ -0,0 +1,29 @@
+import { call, fork, take, put } from 'redux-saga/effects';
+import { REQUEST_SUBMIT, successSubmit, failureSubmit } from './actions';
+
+function submit(data) {
+  // Dummy API calling
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      resolve({ data: 'done' });
+    }, 2000);
+  })
+    .then(data => ({ data }))
+    .catch(error => ({ error }));
+}
+
+function* handleSubmit() {
+  const { payload: { values, resolve, reject } } = yield take(REQUEST_SUBMIT);
+  const { data, error } = yield call(submit, values);
+  if (data && !error) {
+    resolve();
+    yield put(successSubmit({ data }));
+  } else {
+    reject();
+    yield put(failureSubmit({ error }));
+  }
+}
+
+export default function* rootSaga() {
+  yield fork(handleSubmit);
+}

form/store.js

@@ -0,0 +1,18 @@
+import { createStore, applyMiddleware } from 'redux';
+import createSagaMiddleware from 'redux-saga';
+import logger from 'redux-logger';
+import reducer from './reducers';
+import rootSaga from './sagas';
+
+export default function configureStore(initialState) {
+  const sagaMiddleware = createSagaMiddleware();
+  const store = createStore(
+    reducer,
+    initialState,
+    applyMiddleware(
+      sagaMiddleware, logger()
+    )
+  );
+  sagaMiddleware.run(rootSaga);
+  return store;
+};

package.json

@@ -15,7 +15,7 @@
   "license": "MIT",
   "devDependencies": {
     "babel-cli": "^6.10.1",
-    "babel-core": "^6.9.1",
+    "babel-core": "^6.10.4",
     "babel-loader": "^6.2.4",
     "babel-plugin-unassert": "^2.1.0",
     "babel-polyfill": "^6.9.1",
@@ -36,6 +36,7 @@
     "redux-devtools": "^3.3.1",
     "redux-devtools-dock-monitor": "^1.1.1",
     "redux-devtools-log-monitor": "^1.0.11",
+    "redux-form": "^5.2.5",
     "redux-logger": "^2.6.1",
     "redux-saga": "^0.10.5",
     "webpack": "^1.13.1",

public/form.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+<title>Form</title>
+</head>
+<body>
+  <div id="container"></div>
+  <script src="/in-memory/form.bundle.js"></script>
+</body>
+</html>

public/index.html

@@ -14,6 +14,7 @@ <h1><a href="https://github.com/kuy/redux-saga-examples">redux-saga-examples</a>
     <li><a href="microblog.html">Microblog</a></li>
     <li><a href="reject.html">Reject</a></li>
     <li><a href="takex.html">TakeX</a></li>
+    <li><a href="form.html">Form</a></li>
   </ul>
 </body>
 </html>

webpack.config.js

@@ -7,7 +7,8 @@ module.exports = {
     startstop: './startstop/index.js',
     microblog: './microblog/index.js',
     reject: './reject/index.js',
-    takex: './takex/index.js'
+    takex: './takex/index.js',
+    form: './form/index.js'
   },
   module: {
     loaders: [{