Реакт-хук, который подписывается на стор и трансформирует его значение с переданной функцией. Компонент будет обновляться только когда результат функции будет отличаться от предыдущего

Типичный вариант использования: подписаться на изменения отдельного поля в сторе

useStoreMap<State, Result>(
  store: Store<State>,
  fn: (state: State) => Result
): Result
info

Краткая форма useStoreMap добавлена в effector-react@21.3.0

Аргументы

  1. store: Используемый стор
  2. fn ((state) => result): Функция-селектор

Возвращает

(Result)

useStoreMap<Source, Result>({
  store: Store<Source>;
  keys: any[];
  fn: (state: Source, keys: any[]) => Result;
  updateFilter?: (newResult: Result, oldResult: Result) => boolean;
  defaultValue?: Result;
}): Result

Перегрузка для случаев, когда требуется передать зависимости в React (для обновления элементов при изменении этих зависимостей)

Аргументы

  1. params (Object): Объект конфигурации
    • store: Используемый стор
    • keys (Array): Массив, который будет передан в React.useMemo
    • fn ((state, keys) => result): Функция-селектор
    • updateFilter ((newResult, oldResult) => boolean): Опционально функция, используемая для сравнения старого и нового результата работы хука, предназначено для избежания лишних ререндеров. Реализация опции для работы использует createStore updateFilter
    • defaultValue: Опциональное значение по умолчанию, используется когда fn возвращает undefined

Возвращает

(Result)

info

Опция updateFilter добавлена в effector-react@21.3.0

info

Опция defaultValue добавлена в effector-react@22.1.0

Пример

Этот хук полезен для работы со списками, особенно с большими

import { createStore } from "effector";
import { useStore, useStoreMap } from "effector-react";

const data = [
  {
    id: 1,
    name: "Yung",
  },
  {
    id: 2,
    name: "Lean",
  },
  {
    id: 3,
    name: "Kyoto",
  },
  {
    id: 4,
    name: "Sesh",
  },
];

const $users = createStore(data);
const $ids = createStore(data.map(({ id }) => id));

const User = ({ id }) => {
  const user = useStoreMap({
    store: $users,
    keys: [id],
    fn: (users, [userId]) => users.find(({ id }) => id === userId),
  });

  return (
    <div>
      <strong>[{user.id}]</strong> {user.name}
    </div>
  );
};

const UserList = () => {
  const ids = useStore($ids);
  return ids.map((id) => <User key={id} id={id} />);
};

Запустить пример

Перевод поддерживается сообществом

Документация на английском языке - самая актуальная, поскольку её пишет и обновляет команда effector. Перевод документации на другие языки осуществляется сообществом по мере наличия сил и желания.

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

Соавторы