reselect

reselect memoizes ("caches") previous state trees and calculations based on said tree. This means repeated changes and calculations are fast and efficient, providing us with a performance boost over standard mapStateToProps implementations.

The official documentation offers a good starting point!

Usage

There are two different kinds of selectors, simple and complex ones.

Simple selectors

Simple selectors are just that: they take the application state and select a part of it.

const mySelector = state => state.get('someState');

export { mySelector };

Complex selectors

If we need to, we can combine simple selectors to build more complex ones which get nested state parts with reselect's createSelector function. We import other selectors and pass them to the createSelector call:

import { createSelector } from 'reselect';

import mySelector from 'mySelector';

const myComplexSelector = createSelector(mySelector, myState =>

myState.get('someNestedState'),

);

export { myComplexSelector };

These selectors can then either be used directly in our containers as mapStateToProps functions or be nested with createSelector once again:

export default connect(

createSelector(myComplexSelector, myNestedState => ({ data: myNestedState })),

)(SomeComponent);

Adding a new selector

If you have a selectors.js file next to the reducer which's part of the state you want to select, add your selector to said file. If you don't have one yet, add a new one into your container folder and fill it with this boilerplate code:

import { createSelector } from 'reselect';

const selectMyState = () => createSelector(

);

export {

selectMyState,

};

---

Don't like this feature? Click here