Redux Selector
In this article, I will explain about Redux Selector function.
What is selector
Selectors are functions that take Redux state as an argument and return some data to pass to the component.
Selectors are convenience functions used for looking up and retrieving snippets of data from the Redux store, into your components. They play an important role as they help to cope with derived and related data — allowing Redux to store the minimal possible state. The selector is neither import from redux nor installs a new library.
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.
Ok. Now I will explain through one example.
In the above example, we display the name Mr… or Mrs…. or Miss… we write selector function inside the mapStateToProps function and we check through conditions and return it ‘userName’.
But it is not the best practise writing selector inside the component. The best practice is to write your selector inside the appropriate reducers.
In the above code, we receive a particular state as an argument and we make some changes then return values.
Call in your component.
Find method using the selector.
We show the data that distilled from the find method.
In our ‘app.js’ file just we call ‘selectUserRoom’ function inside the ‘mapStateToProps’.
In ‘this.props.accomodation’ we filter data using the find() method. Return those data are matched.
The above example we using selector function. But we are neither import anything nor install a new library. But it affected performance.
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.
Reselect is a simple library for creating memoized, composable selector functions. Reselect selectors can be used to efficiently compute derived data from the Redux store. — Redux
- 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.
Before we use Reselect we should know ‘memoize’. Do not imagine this is about memorizing.
Memoization
In computing, memoization or memoisation is an optimization technique used primarily to speed up computer programs by storing the results of expensive function callsand returning the cached result when the same inputs occur again. — Wikipedia
Reselect provides a function ‘createSelector’ for creating memoized selectors. ‘createSelector’ takes an array of input-selectors and a transform function as its arguments. If the Redux state tree is changed in a way that causes the value of an input-selector to change, the selector will call its transform function with the values of the input-selectors as arguments and return the result. If the values of the input-selectors are the same as the previous call to the selector, it will return the previously computed value instead of calling the transform function.
Let’s define a memoized selector.
In the above code, we used createSelector and passed ‘selectUserReservation’ and ‘selectRoomList’ as an argument in createSelector.
‘selectUserReservation’ and ‘selectRoomList’ are input-selector. They are created as ordinary non-memoized selector functions because they do not transform the data they select.
‘selectUserRoom’ on the other hand is a memoized selector. It takes ‘selectUserReservation’ and ‘selectRoomList’ as input-selectors, and a transform function that calculates the find.
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.
Now in below example, I will send props as a selector parameter. We send id as a parameter.
Above ‘vId’ is the parameter. Using the find method which vehicle id matches with ‘vId’ it returns that vehicle value.
In our component
The above code we pass ‘props.vehicleId’ as the second argument for ‘getVechileState’ function.
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.
Thank you for reading. Please give me your valuable feedback.
Reference:
My Git link:
