use redux-form for form logic

package.json

@@ -40,6 +40,7 @@
     "react-redux-subspace": "^2.0.3-alpha",
     "react-test-renderer": "^15.6.1",
     "redux": "^3.7.2",
+    "redux-form": "^7.0.3",
     "redux-loop": "^3.1.2",
     "redux-subspace": "^2.0.3-alpha",
     "redux-subspace-loop": "^2.0.4-alpha",

src/UserCreator/actions.js

@@ -1,14 +1,6 @@
-export const UPDATE_NAME_FIELD = "USER_CREATOR/UPDATE_NAME_FIELD";
-export function updateNameField(name) {
-  return {
-    type: UPDATE_NAME_FIELD,
-    payload: name
-  };
-}
-
 export const CREATE_USER = "USER_CREATOR/CREATE_USER";
-export function createUser() {
-  return { type: CREATE_USER };
+export function createUser(user) {
+  return { type: CREATE_USER, payload: user };
 }
 
 export function saveUser(user) {

src/UserCreator/index.js

@@ -1,31 +1,34 @@
 import React, { Component } from "react";
-import { updateNameField, createUser } from "./actions";
+import { createUser } from "./actions";
 import { connect } from "react-redux";
+import { Field, reduxForm } from "redux-form";
 
 class UserCreator extends Component {
-  updateNameField = event => {
-    this.props.updateNameField(event.target.value);
-  };
-  createUser = event => {
-    event.preventDefault();
-    this.props.createUser();
+  createUser = user => {
+    this.props.createUser(user);
   };
   render() {
-    const { name } = this.props;
+    const { handleSubmit } = this.props;
     return (
-      <form onSubmit={this.createUser}>
+      <form onSubmit={handleSubmit(this.createUser)}>
         <h3>User creator</h3>
-        <input type="text" value={name} placeholder="name" onChange={this.updateNameField} />
+        <Field name="name" component="input" type="text" placeholder="name" />
         <button>Save</button>
       </form>
     );
   }
 }
 
-const mapStateToProps = state => ({ name: state.name });
+const mapStateToProps = state => ({});
 const mapDispatchToProps = {
-  updateNameField: updateNameField,
   createUser: createUser
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(UserCreator);
+export default connect(mapStateToProps, mapDispatchToProps)(
+  reduxForm({
+    getFormState: state => {
+      return state;
+    },
+    form: "user"
+  })(UserCreator)
+);

src/UserCreator/reducer.js

@@ -1,17 +1,16 @@
 import { loop, Cmd } from "redux-loop";
-import { CREATE_USER, UPDATE_NAME_FIELD, USER_SAVED, saveUser, userSaved } from "./actions";
+
+import { CREATE_USER, USER_SAVED, saveUser, userSaved } from "./actions";
+
 import { globalAction } from "redux-subspace";
+import { reducer as formReducer } from "redux-form";
+
 import { userCreated } from "../state/users";
 
-const initialState = {
-  name: ""
-};
+const initialState = {};
 
 export default function(state = initialState, action) {
   switch (action.type) {
-    case UPDATE_NAME_FIELD:
-      return { ...state, name: action.payload };
-
     case USER_SAVED:
       return loop(state, Cmd.action(globalAction(userCreated(action.payload))));
 
@@ -20,11 +19,11 @@ export default function(state = initialState, action) {
         state,
         Cmd.run(saveUser, {
           successActionCreator: userSaved,
-          args: [state]
+          args: [action.payload]
         })
       );
 
     default:
-      return state;
+      return formReducer(state, action);
   }
 }

yarn.lock

@@ -2101,6 +2101,10 @@ es5-ext@^0.10.14, es5-ext@^0.10.9, es5-ext@~0.10.14:
     es6-iterator "2"
     es6-symbol "~3.1"
 
+es6-error@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/es6-error/-/es6-error-4.0.2.tgz#eec5c726eacef51b7f6b73c20db6e1b13b069c98"
+
 es6-iterator@2, es6-iterator@^2.0.1, es6-iterator@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.1.tgz#8e319c9f0453bf575d374940a655920e59ca5512"
@@ -3889,7 +3893,7 @@ locate-path@^2.0.0:
     p-locate "^2.0.0"
     path-exists "^3.0.0"
 
-lodash-es@^4.2.0, lodash-es@^4.2.1:
+lodash-es@^4.17.3, lodash-es@^4.2.0, lodash-es@^4.2.1:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.4.tgz#dcc1d7552e150a0640073ba9cb31d70f032950e7"
 
@@ -4987,7 +4991,7 @@ [email protected], promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.0, prop-types@^15.5.10:
+prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.5.9:
   version "15.5.10"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
   dependencies:
@@ -5266,6 +5270,19 @@ reduce-function-call@^1.0.1:
   dependencies:
     balanced-match "^0.4.2"
 
+redux-form@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/redux-form/-/redux-form-7.0.3.tgz#80157d01df7de6c8eb2297ad1fbbb092bafa34f5"
+  dependencies:
+    deep-equal "^1.0.1"
+    es6-error "^4.0.0"
+    hoist-non-react-statics "^2.2.1"
+    invariant "^2.2.2"
+    is-promise "^2.1.0"
+    lodash "^4.17.3"
+    lodash-es "^4.17.3"
+    prop-types "^15.5.9"
+
 redux-loop@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/redux-loop/-/redux-loop-3.1.2.tgz#5abbae1bb96ecaff1a51dcbb8b8978c6166b1522"