React / Redux: Should containers have any knowledge of state structure?

Question

This tutorial by Dan Abramov suggests that the advantage to using selectors that act on global state (rather than a slice of state) is that they allow containers to be decoupled from knowledge of the state structure.

If that's the case, shouldn't we also avoid directly mapping state values to props, and use selectors instead? Otherwise, our containers must still know about where those values exist in the state tree.

To illustrate using an example...

Directly maps a nested state value to a prop:

const mapStateToProps = (state) => ({
  isModalVisible: state.modal.isVisible,
});

VS

Has no knowledge of state structure. Gets value using isModalVisible() selector:

const mapStateToProps = (state) => ({
  isModalVisible: isModalVisible(state),
});

However, the problem with the latter approach is that for each value in the state tree, we have to write a selector. This seems like a lot of boilerplate code just to select a simple value. Is this considered best practice?

Answer 1

The answer for your question is: "it depends"

Do you have a tiny app?

Maybe avoid using redux at all and stick to react components state.

      You Might Not Need Redux

Do you have a small app?

Writing a bunch of selectors is a lot of boilerplate just like you said. Avoid writing them and stick to simply mapping, using mapStateToProps.

Medium to large apps?

This is where selectors and memoized selectors pay-off. You'll find yourself checking if modals is visible in many components. Currently in your state modal is under state.modal.visible. But tomorrow a modal might be a part of a parent modal, you'll have to change all mapping in all your components to state.parentModal.modal.visible. You can see how this can turn badly right?

The pros of selectors:

• Hides complexity when working in a team.
• Changing your state means only modifying your selector function.
• Avoid writing filters and reducing lists on each mapPropsToState function.

Pros of Memoized selectors:

• Performance.

Cons

• Boilerplate code and slower to get started.
• Additional libraries.

Hope it answers your question.