Что такое селекторы в redux?

Я пытаюсь следовать этому код на redux-saga

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

который затем используется в саге, как этой:

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

этой getUser редуктор (это даже редуктор) выглядит очень отличается от того, что я обычно ожидал бы, что редуктор будет выглядеть.

кто-нибудь может объяснить, что такое селектор и как getUser является ли редуктор и как он вписывается в redux-saga?

33
reactjs redux redux-saga

3 ответов

getUser не является редуктором, это действительно селектор, то есть функция, которая знает, как извлечь определенную часть данных из хранилища.

селекторы предоставить дополнительный слой, такой, что если вы изменили структуру магазина и вдруг ваш users больше не были в state.entities.users а с state.users.objects.entities (или что-то еще), то вам нужно только обновить getUser селектор и не каждое место в вашем приложении, где вы делали ссылку на старый местоположение.

это делает их особенно удобными, когда дело доходит до рефакторинга вашего магазина Redux.

45

селекторы являются геттерами для состояния redux. Как и геттеры, селекторы инкапсулируют структуру состояния и используются повторно. Селекторы также могут вычислять производные свойства.

вы можете написать селекторы, такие как те, которые вы видели в redux-saga. Например:

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

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

etc...

вы также можете использовать выберите, которая является простой библиотекой "селектора" для Redux, которая запоминает селекторы, чтобы сделать их более эффективными.

8

селекторы-это функции, которые принимают состояние Redux в качестве аргумента и возвращают некоторые данные для передачи компоненту.

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

почему он должен использоваться?

  1. одна из основных причин-избежать дублирования данных в Redux.
  2. ваша форма объекта данных продолжает меняться по мере роста вашего приложения, поэтому вместо внесения изменений во все связанные компоненты.Гораздо рекомендуется / проще изменить данные в одном месте.
  3. селекторы должны быть рядом редукторы, потому что они работают в одном и том же состоянии. Данные легче синхронизировать.

С помощью выберите помогает запомнить значение данных, когда тот же вход передается функции, возвращает предыдущий результат, а не пересчитывать снова.Таким образом, это повышает производительность приложения.

1