React/Redux Form Cheat Sheet

I don't often create forms; but when I do, this cheat sheet helps. It limits you (and me) from missing the major routine parts.

I assume you have some understanding of React/Redux/React-Router/React-Redux and using forms. Take this and build on off it. And then let me know. Maybe yours is better. :)

1. Import

import React from 'react';
import { Link } from 'react-router-dom' and any other components
import {connect} from 'react-redux' and any other components
import {ToCartDevExample} from '../../redux/actions' The Redux actions for mapStateToProps or mapDispatchToProps
Any other needed components

2. Create a Class function for local state in order to have controlled form.

class nameOfClass extends React.Component {render() {
return ( <div> </div> ) } }

3. Create handleChange arrow function to setState locally

Each form fields should have a name="somethingUnique" and value="fromTheState"
You might need to pass event aka ‘e’ to the handleChange

4. Create handleSubmit to send this.state to your fetch and/or Redux action(s)

5. Render the form in the render(){ return ( form stuff here ) } with required fields (remember the name and values set to the local state).

6. mapDispatchToProps w/ the appropriate action and the state

const mapStateToProps = (state) => {
return {cartItems: state.cartReducer.cartItems }
}

7. Export the dispatch and the class

export default connect(null, mapDispatchToProps)(Login) if state does NOT requiring exporting;
Or export default connect(mapStateToProps)(CartCheckout)

8. Create Redux actions

9. Create/Update the appropriate Reducer with the new CASE with return { new/updated state code here } statement with the new state from the payload. Reducer needs action and state.

Have thoughts on this cheat sheet or other useful cheat sheets? Drop note. I'd love to hear and see your examples (or counterpoints).