Simple form with Redux Form (including validation).

README.md

@@ -27,8 +27,10 @@ My notes of the Udemy course 'Modern React with Redux'
   - [Faker](https://github.com/marak/Faker.js/) (`basics` app)
   - [Lodash](https://lodash.com/) (`blog` app)
   - [Google API JavaScript client](https://github.com/google/google-api-javascript-client)
-- JavaScript state managers
-  - [Redux](https://redux.js.org/) ([Thunk](https://github.com/reduxjs/redux-thunk))
+- Redux / MobX
+  - [Redux](https://redux.js.org/)
+  - [Thunk](https://github.com/reduxjs/redux-thunk)
+  - [Redux Form](https://redux-form.com/)
   - [Mobx](https://mobx.js.org/README.html)
 - Browser APIs
   - [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) (`seasons` app)
@@ -1222,7 +1224,16 @@ Save data in the Redux store between page refreshes:
 https://localhost:3000/?debug_session=SOME_KEY
 ```
 
-By changing the session id in the URL you can even
+By changing the session id in the URL you can even maintain multiple sessions (i.e. multiple Redux stores) at the same time.
+
+# Section 23: Redux Forms
+
+When using React with Redux you have to write a lot of boiler plate code:
+
+- **mapStateToProps** to use data from the Redux store in your React components
+- **Action creators** and **reducers** to store input data from your React components in the Redux store
+
+When it comes to form elements, [Redux Form](https://redux-form.com/) simplifies this by providing standard mappers, action creators and reducers to automatically map data between the Redux store and form components.
 
 # Appendix: JavaScript
 

streams/client/package.json

@@ -12,6 +12,7 @@
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
     "redux": "^4.0.5",
+    "redux-form": "^8.3.7",
     "web-vitals": "^0.2.4"
   },
   "scripts": {

streams/client/src/components/Header.jsx

@@ -6,7 +6,7 @@ const Header = () => {
   return (
     <div className='ui secondary pointing menu'>
       <Link to='/streams/new' className='item'>
-        Stream
+        New Stream
       </Link>
       <div className='right menu'>
         <Link to='/' className='item'>

streams/client/src/components/streams/StreamCreate.jsx

@@ -1,9 +1,57 @@
 import React from "react";
+import { Field, reduxForm } from "redux-form";
 
 class StreamCreate extends React.Component {
+  renderError(error, touched) {
+    if (error && touched) {
+      return <div className='ui error message'>{error}</div>;
+    }
+  }
+
+  renderInput = (fieldProps) => {
+    // fieldProps.input & fieldProps.meta are provided by the redux-forms framrwork.
+    // Custom Field attributes (like label) are also made available on the fieldProps object.
+    const error = fieldProps.meta.error;
+    const touched = fieldProps.meta.touched;
+    const cssClass = error && touched ? "field error" : "field";
+    return (
+      <div className={cssClass}>
+        <label>{fieldProps.label}</label>
+        <input {...fieldProps.input} autoComplete='off' />
+        {this.renderError(error, touched)}
+      </div>
+    );
+  };
+
+  onSubmit(formValues) {
+    // Form is already stored in Redux store. At this point we can submit to backend server etc.
+  }
+
   render() {
-    return <div>StreamCreate</div>;
+    return (
+      <form onSubmit={this.props.handleSubmit(this.onSubmit)} className='ui form error'>
+        <Field name='title' component={this.renderInput} label='Title' />
+        <Field name='description' component={this.renderInput} label='Description' />
+        <button className='ui button'>Submit</button>
+      </form>
+    );
   }
 }
 
-export default StreamCreate;
+const validate = (formValues) => {
+  const errors = {};
+  if (!formValues.title) {
+    errors.title = "Invalid title";
+  }
+  if (!formValues.description) {
+    errors.description = "Invalid description";
+  }
+  return errors;
+};
+
+export default reduxForm({
+  // Name to identify this component's form in the Redux store
+  form: "createStream",
+  // Reference to the form validation method
+  validate: validate
+})(StreamCreate);

streams/client/src/reducers/index.js

@@ -1,4 +1,5 @@
 import { combineReducers } from "redux";
+import { reducer as formReducer } from "redux-form";
 import { SIGN_IN, SIGN_OUT } from "../actions/types";
 
 const SIGNED_OUT_STATE = {
@@ -24,4 +25,4 @@ const authenticationReducer = (state = SIGNED_OUT_STATE, action) => {
   }
 };
 
-export default combineReducers({ authDetails: authenticationReducer });
+export default combineReducers({ authDetails: authenticationReducer, form: formReducer });