Sai Kishore Komanduri

Engineering an eGovernance Product | Hashnode Alumnus | I love pixel art

Sep 22, 2016

If you're using React, the "recommended" way would be to use the <Provider> component that comes along with the react-redux library, and have all of your app components as children inside the Provider component.

ReactDOM.render(
  <Provider store={createStore(todoApp)}>
    <TodoApp />
  </Provider>,
  document.getElementById('root')
);

What this does is it makes the store available to all of the children components through context. So you could do something like const state = this.context.store.getState() in one of your components. But instead of doing this, it is recommended to use connect() provided by react-redux

`connect()` and performance

Since state is anyway available to all of the children components, you can have your mapStateToProps function in your container components, and return only those parts of the state that could be passed on as props to the corresponding presenter components.

function mapStateToProps(state) {
    const { todos, visibilityFilter } = state;
    return {
        todos,
        visibilityFilter
    }
}

function mapDispatchToProps(dispatch) {
    ...

export default connect(mapStateToProps, mapDispatchToProps)(TodoApp);

For a better performant Redux, if you remember only one thing, let it be this: mapStateToProps is the new render; called on every store update ... and in this context, the connect() function (which returns a higher order component that wraps around your presenter component) already optimises for updates based on any changes in the part of the state it passes down as props to the presenter component.

So it only makes sense to pass only the required parts of the state as props through mapStateToProps. So if there are no changes to these props, connect() will optimise for whether the component should update or not.

If you want a detailed outlook into React/Redux perf. concepts, this GitHub issue serves as a great FAQ. This presentation on the same topic, is also awesome.

Ade Viankakrisna Fadlil

Sep 22, 2016

Wow! Is this in the documentation? I never knew that you can access state from the context. Do you have any links to read more about how context (in general) work? Does it behave the same way as props? I still think that mapping state to props is a boilerplate code. Its best to concentrate more on reducers and actions rather than mapping state. From what i get from your answer it is good for performance. How abiut maintainability?

@viankakrisna context is a tad different from props.

Occasionally, you want to pass data through the component tree without having to pass the props down manually at every level. React's "context" feature lets you do this.

You should read this, for a complete "how-to", and "when-to" for using context in React.

With react-redux, should you choose to go along with using context; you'd have to specify contextTypes of the object (store, here) in all of your components that access a context object through this.context. Like so:

TodoApp.contextTypes = { store: React.PropTypes.object };

Here is an egghead video by Dan Abramov implementing <Provider> using context.

context is an experimental feature, and its API may change in the future versions. Instead of worrying about React's context API, the recommended approach it to use connect(), pick the parts of the state you need, and you're done! It is boilerplate yes, but it has to be done only once, while defining your components. So there is no question of maintainability, as along as you have a sensible structure for your components.

Search Hashnode

connect() and performance

`connect()` and performance