Best Practice for React-Redux

This is not a details blog post. This is something I wrote as a note to my team's slack channel.

While reviewing code or when fixing a bug, some times I get frustrated to see bad code. So consider this as a short rant.

Don't pass unnecessary parameters to Components

Passing just necessary parameters for the component helps in better performance by reducing unnecessary reflows.

// Bad
<Foo {..this.state}/>

// Good
<Foo price={this.state.x}/>

Don't pass around global state

If a property is from global state (redux). Always use connect in the component. Don't pass parameter around. The whole point of redux is to avoid passing around parameters.

// Bad
<Foo {..this.props}/>

// Good
<Foo/>

import connect from 'react-redux';

export default connect(mapStateToProps)(Foo)

Don't connect the entire state

When using redux connect, pass only necessary properties from global state

// Bad
function mapStateToProps (state) {
  return state;
}
export default connect(mapStateToProps)(MyComponent);

// Good
function mapStateToProps (state) {
  return { user: state.user, kitchen: state.kitchen };
}
export default connect(mapStateToProps)(MyComponent);