Redux Selector

What is selector

Why should use the selector

It is a best practice to keep your Redux state minimal and retrieve whenever it needs. Selectors help with that. They can compute derived data, allowing Redux to store the minimal possible state. Selectors are also very efficient.

Find method using the selector.

We show the data that distilled from the find method.

Why it is affected the performance of the application.

In the above example, ‘mapStateToProps’ calls ‘selectUserRoom() ’to calculate ‘accomodation’. This works great, but there is a drawback: ‘accomodation’ is calculated every time the component is updated. If the state tree is large, or the calculation expensive, repeating the calculation on every update may cause performance problems. Reselect can help to avoid these unnecessary recalculations.

Intro about Reselect.

  • Selectors can compute derived data, allowing Redux to store the minimal possible state.
  • Selectors are efficient. A selector is not recomputed unless one of its arguments changes.
  • Selectors are composable. They can be used as input to other selectors.

Memoization

Accessing React Props in Selectors

So far we have only seen selectors receive the Redux store state as an argument, but a selector can receive props too.

Composing Selector

A memoized selector can itself be an input-selector to another memoized selector. In our code ‘makeGetVehicleState’ is the memoized selector we can pass it as an input-selector fo another selector.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Edison Devadoss

Edison Devadoss

Software developer / JavaScript / React / React Native / Firebase / Node.js / C Programming / Book Reader / Story Teller