Que sont les sélecteurs dans Redux?

Question

Je suis en train de suivre ce code en redux-saga

export const getUser = (state, login) => state.entities.users[login]
export const getRepo = (state, fullName) => state.entities.repos[fullName]

Qui est ensuite utilisé dans la saga comme ceci:

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)
  }
}

Cette getUser réducteur (c'est même un reducer) est très différente de ce que j'aurais normalement s'attendre à un réducteur de ressembler.

Quelqu'un peut-il expliquer ce qu'est un sélecteur est et comment getUser est un réducteur et comment il s'intègre avec redux-saga?

Answer 1

getUser n'est pas réducteur, c'est en effet un sélecteur, c'est une fonction qui sait comment extraire une partie des données du magasin.

Les sélecteurs de fournir une couche supplémentaire de telle sorte que si vous avez modifié votre magasin de structure et tout d'un coup votre users n'étaient plus à l' state.entities.users mais plutôt à l' state.users.objects.entities (ou autre), alors vous avez seulement besoin de mettre à jour l' getUser du sélecteur et pas toute la place dans votre application où vous faisiez référence à l'ancien emplacement.

Cela les rend particulièrement pratique quand il s'agit de la refactorisation de votre Redux magasin.

Answer 2

Les sélecteurs sont des getters pour le redux de l'état. Comme les méthodes de lecture, les sélecteurs de résumer la structure de l'état, et sont réutilisables. Les sélecteurs peuvent également calculer les propriétés dérivées.

Vous pouvez écrire des sélecteurs, tels que ceux que vous avez vu dans redux-saga. Par exemple:

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

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

etc...

Vous pouvez également utiliser resélectionner, qui est un simple "sélecteur" bibliothèque pour Redux, qui memoize sélecteurs pour les rendre plus efficaces.

Answer 3

Les sélecteurs sont des fonctions qui prennent Redux de l'état en tant qu'argument et de retourner une partie des données à passer au composant.

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

Pourquoi doit-il être utilisé?

1. L'une des principales raisons est d'éviter la duplication des données dans Redux.
2. Vos données de forme de l'objet, garde variant de votre application augmente, alors plutôt que de faire des changements dans tous les éléments connexes.Il est vivement recommandé/plus facile de modifier les données à un seul endroit.
3. Sélecteurs devrait être proche de réducteurs, parce qu'ils fonctionnent sur le même état. Il est plus facile pour les données à conserver la synchronisation.

À l'aide de resélectionner aide à memoize sens lorsque l'entrée, il est passé à la fonction, retourne le résultat précédent au lieu de recalculer à nouveau.Donc, cela améliore les performances de votre application.