reactjs - react - redux saga tutorial

¿Qué son los selectores en redux?

Question

Estoy intentando seguir este code en redux-saga

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

Que luego se usa en la saga así:

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

Este reductor getUser (si es incluso un reductor) se ve muy diferente de lo que normalmente se esperaría que tuviera un reductor.

¿Alguien puede explicar qué es un selector y cómo getUser es un reductor y cómo encaja con redux-saga?

Answer 1

Los selectores son captadores para el estado de redux. Como los captadores, los selectores encapsulan la estructura del estado y son reutilizables. Los selectores también pueden calcular propiedades derivadas.

Puedes escribir selectores, como los que viste en la saga de redux. Por ejemplo:

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

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

etc ...

También puede usar reselect , que es una simple biblioteca de "selector" para Redux, que memoriza los selectores para hacerlos más eficientes.

Answer 2

Los selectores son funciones que toman el estado de Redux como un argumento y devuelven algunos datos para pasar al componente.

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

¿Por qué debería ser utilizado?

1. Una de las razones principales es evitar datos duplicados en Redux.
2. La forma de su objeto de datos sigue variando a medida que su aplicación crece, así que en lugar de hacer cambios en todos los componentes relacionados. Es mucho más recomendable / fácil cambiar los datos en un solo lugar.
3. Los selectores deben estar cerca de los reductores porque operan en el mismo estado. Es más fácil que los datos se mantengan sincronizados.

El uso de reselect ayuda a memorizar el significado de los datos cuando se pasa la misma entrada a la función, devuelve el resultado anterior en lugar de volver a calcularlo nuevamente. Por lo tanto, esto mejora el rendimiento de la aplicación.

Answer 3

getUser no es un reductor, de hecho es un selector, es decir, una función que sabe cómo extraer un dato específico de la tienda.

Los selectores proporcionan una capa adicional tal que si modificó la estructura de su tienda y, de repente, sus users ya no estaban en state.entities.users sino en state.users.objects.entities (o lo que sea), solo necesita actualizar el getUser selector de getUser y no todos los lugares de la aplicación en los que hacía referencia a la ubicación anterior.

Eso los hace particularmente útiles cuando se trata de refactorizar su tienda Redux.