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).
Top comments (0)