React notes for myself (and for anyone who is interested)

Technical
, ,

Use bind

Do not do this {() => foo()} while you can do {this.foo.bind(this, bar)} even better you can create a helper to pick up all handler methods and fix the context.

1.) Where is my dispatch

You can always pass down the dispatch method as a prop!

export function mapDispatchToProps(dispatch) {

  return {

dispatch,

    onLoad: () => {

      dispatch(foo());

    }

  }

}

2.) Nesting

You can do nested elements like:

  {foo.map(item =>

   

  )}

and within the Parent

return (

{children}

)

3.) Reducer and Reselect

In the reducer

const reducers = combineReducers({

  fooOne,

  fooTwo,

});

… in the selector (Reselect)

const makeSelectFoo = () => createSelector(

  selectFoo,

  (stateFoo) => stateFoo[‘**fooOne’**][‘bar’]

);

4.) Modifying a child (via cloneElement)

1
2
3
4
5
6
7
renderChildren() {
  return React.Children.map(this.props.children, child => {
    return React.cloneElement(child, {
      name: this.props.name
    })
  })
}

5.) Destructuring in pure component

const myComponent = ({propertyOne, propertyTwo}) => { //this is instead of (props) then props.propertyOne }

6.) Rest and Spread

1
2
3
4
5
6
const myComponent = ({onClick, ...otherProperties}) => {
//this is instead of (props) then props.propertyOne
<Foo {...otherProperties}>
 <Button onClick={onClick}>Click me</Button>
</Foo>
}