Quick notes around redux-react implementation (boilerplate in separate file)

React-Redux Notes.md

React-Redux Notes

Stuck?

• Map is not a function? Props are either named incorrectly or not getting passed down properly.
  • Keep in mind props (for ui component) vs this.props (stateful component)
• Did you bind your function?
• To access value on forms without keeping track of it on state, we can use event.target.property.value
• When you're doing a map, remember to return inside the map, and remember to set a key!

React-Redux Implementation Checklist

Main elements

1. Make a store (takes a reducer / middleware)
2. Hook up Provider within browser/index.js
3. Create constants, action creators, and reducers in redux folder (also create async actions if using thunk)
4. If using react-redux, use mapState, mapDispatch, and connect() to supply all components with state. If using react and redux separately, make sure each component is subscribing and unsubscribing from the store

Other considerations

5. Use react-router, replace <a href></a> with <Link to={}></Link>
6. Consider IndexRedirect

Code Examples

Map

{
  props.properties.map(property => {
    return (
      <div key={property.id}> {property.name} </div>
    )
  })
}

Forms:

On Change:

<input onChange={ ((event) => props.methodToExecuteOnChange(event.target.value)) } />

On Submit:

<form onSubmit={this.submit}>

submit(event) {
    event.preventDefault();
    // change the state or something
    // make sure submit is bound
  }