I am trying to follow this code in redux-saga
export const getUser = (state, login) => state.entities.users[login]
export const getRepo = (state, fullName) => state.entities.repos[fullName]
Which is then used in the saga like this:
import { getUser } from '../reducers/selectors'
// load user unless it is cached
function* loadUser(login, requiredFields) {
const user = yield select(getUser, login)
if (!user || requiredFields.some(key => !user.hasOwnProperty(key))) {
yield call(fetchUser, login)
}
}
This getUser
reducer (is it even a reducer) looks very different from what I would normally expect a reducer to look like.
Can anyone explain what a selector is and how getUser
is a reducer and how it fits in with redux-saga?
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:
etc...
You can also use reselect, which is a simple “selector” library for Redux, that memoize selectors to make them more efficient.
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 atstate.entities.users
but instead atstate.users.objects.entities
(or whatever) then you only need to update thegetUser
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.
Selectors are functions that take Redux state as an argument and return some data to pass to the component.
Why should it be used?
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.
but you can use selector
Main Problem is this component use all user: state.user and any changes in user (etc isAdmin ,isAuth, access) runs rerender this component which need only part of this store - access!!!
https://medium.com/@parkerdan/react-reselect-and-redux-b34017f8194c
The createSelector function provided by Reselect implements the most basic way to derive a selector from previous selectors. The simplest use case is to derive a selector from a single other selector. In this case, the parameters to createSelector are the input selector and a function transforming the result of that selector into the result of the new selector. For example
This is equivalent to (ignoring memoization):
The createSelector function can combine data from multiple selectors as well as from a single selector. We can pass any number of selectors to createSelector, and their results will be passed to the function passed as the final argument. For a (somewhat contrived) example:
is equivalent to
common pattern when writing mapStateToProps functions with selectors is to return an object with each key storing the result of a particular selector. The createStructuredSelector helper function in Reselect lets us write this pattern with the minimum of boilerplate. For example, if we writ
it is equivalent to
https://docs.mobify.com/progressive-web/0.15.0/guides/reselect/