What are selectors in redux?

Solution 1:

getUser is not a reducer, it is indeed a selector, that is, a function that knows how to extract a specific piece of data from the store.

Selectors provide an additional layer such that if you altered your store structure and all of a sudden your users were no longer at state.entities.users but instead at state.users.objects.entities (or whatever) then you only need to update the getUser selector and not every place in your app where you were making a reference to the old location.

That makes them particularly handy when it comes to refactoring your Redux store.

Solution 2:

Selectors are getters for the redux state. Like getters, selectors encapsulate the structure of the state, and are reusable. Selectors can also compute derived properties.

You can write selectors, such as the ones you saw in redux-saga. For example:

const getUsersNumber = ({ users }) => users.length;

const getUsersIds = ({ users }) => users.map(({ id }) => id);

etc...

You can also use reselect, which is a simple “selector” library for Redux, that memoize selectors to make them more efficient.

Solution 3:

Selectors are functions that take Redux state as an argument and return some data to pass to the component.

const getUserData = state => state.user.data;

Why should it be used?

1. One of the main reasons is to avoid duplicated data in Redux.
2. Your data object shape keeps varying as your application grows, so rather than making changes in all the related component.It is much recommended/easier to change the data at one place.
3. Selectors should be near reducers because they operate on the same state. It is easier for data to keep in sync.

Using reselect helps to memoize data meaning when the same input is passed to the function, returns the previous result rather than recalculating again.So, this enhances your application performance.