Повторение по селекторам

Статья в документации: https://redux.js.org/usage/deriving-data-selectors

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

Зачем нужны селекторы

Использование селекторов позволяет сохранять состояние максимально чистым (все, что можно вычислить, вычисляется в селекторах), а также дает возможность переиспользовать логику выбора данных (один селектор можно использовать в нескольких местах). Это особенно удобно, если селектор достает данные из глубин состояния (третий-четвертый уровень вложенности).

В общем, в селекторах инкапсулируется логика получения данных из состояния. Они знают структуру состояния и как достать нужные данные. В идеале, это знание не должно выходить за пределы селекторов и редьюсера. Компоненты не должны заботиться об устройстве состояния, они хотят только получать нужные данные.

Организация селекторов

Документация рекомендует давать функция-селекторам осмысленные имена, начинающиеся с select.

Селекторы обычно располагаются в файлах слайсов, рядом с логикой редьюсера. Отдельные селекторы могут находиться и в компонентах (специфичные селекторы, которые не переиспользуются в других местах). Селекторы также могут находиться внутри thunks, так как там есть доступ к полному состоянию.

Селекторы применяются вместе с хуком useSelector.

Проблемы

Внутри селекторов могут производиться достаточно сложные вычисления, поэтому следует минимизировать количество их запусков. Однако селекторы запускаются при каждом изменении состояния, причем все селекторы, даже те, которые не имеют отношения к изменившимся данным.

Хук useSelector сравнивает результат выполнения селектора с предыдущим (используя строгое равенство `===`). Если значения отличаются, выполняется перерендер. То есть селектор не должен возвращать новое значение, если ничего не изменилось. Но тут появляется проблема, например, с методами массивов (map, filter), которые всегда возвращают новый массив. Даже если список отфильтрованных элементов не изменился, хук увидит новый массив и посчитает, что нужен перерендер.

Чтобы избежать этого, нужна мемоизация селекторов. (Мемоизация не нужна, если селектор возвращает примитивное значение).

Мемоизация

Для мемоизации мы используем библиотеку Reselect (есть и альтернативы, которые указаны в статье). Она предоставляет функцию createSelector, которая принимает любое количество входных селекторов (для проверки изменения различных частей состояния) и один выходной (собственно для выборки данных). Выходной селектор вызывается только в том случае, если входные селекторы возвращают изменившиеся результаты.

#управлениесостоянием #документация #redux #оптимизация

Реализация функциональности Шаг назад

Статья в документации: https://redux.js.org/usage/implementing-undo-history

В статье описано, как реализовать в Redux-приложении функционал Шаг назад/вперед. В Redux это особенно просто, так как все состояние хранится в одном объекте и при каждом изменении оно представлено новым объектом - значит легко хранить последовательность состояний. К тому же вся логика управления состоянием находится в функции (редьюсере). Здесь можно использовать паттерн декоратор, чтобы добавить новый функционал, не ломая основной.

Глобально паттерн выглядит так:

{
  past: [T, T],
  present: T,
  future: [T]
}

Текущее состояние хранится в поле present. При каждом изменении старое состояние добавляется в массив past, а present изменяется. Если потребуется сделать Шаг назад, мы просто возьмем последнее состояние из past и установим его в present. При этом текущее состояние нужно сохранить в future, чтобы к нему можно было вернуться.

В статье дана полная реализация алгоритма. Также можно воспользоваться готовой реализацией из пакета redux-undo.

#управлениесостоянием #redux #документация #паттерны

Я все время неправильно создавал формы в React

Статья (англ.): https://dev.to/kuvambhardwaj/i-was-creating-forms-the-wrong-way-all-along-in-reactjs-hl3

Автор делится своим подходом к созданию форм в React. Вместо многочисленных useState и onChange для каждого поля ввода он использует нативные возможности HTML: тег form, атрибуты name и структуру FormData.

Выглядит такой подход действительно намного изящнее, однако в то же время он лишен некоторых преимуществ. В частности тут мы имеем дело с неконтролируемыми полями ввода, а значит, не можем следить за их значениями.

Если вам все же нужны контролируемые поля внутри формы, автор предлагает смешивать подходы, что выглядит уже грязновато.

В любом случае статья полезна, так как напоминает, что внутри React не следует забывать о нативных возможностях языка и окружения.

#формы #ссылки #паттерны

Управление состоянием в React: продолжение

В рамках темы управления состоянием мы разобрались со связкой useContext + useReducer, познакомились с Redux и даже с Redux Toolkit.

В документации Redux еще осталось несколько интересных разделов (Faq, Style Guide, Api Reference), но информация в них во многом повторяется, поэтому пока можно пойти дальше, а к ним вернуться на досуге.

Кроме того, хотелось бы отдельно вернуться к RTK Query - эта тема зашла хуже всего, слишком много абстракций.

Но это все позже, а далее по плану - взглянуть на альтернативы Redux.

#управлениесостоянием #отложено

Recoil. Первый взгляд

Recoil - это инструмент управления глобальным состоянием приложения, созданный специально для React. Интерфейс библиотеки очевидно вдохновлен реактом, поэтому использовать ее очень просто.

Атомы

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

Список элементов TODO-листа будет выглядить вот так:

const todoListState = atom({
  key: "todoListState",
  default: []
});

А это значение фильтра по статусу элементов:

const todoListFilterState = atom({
  key: "todoListFilterState",
  default: 'all'
});

Селекторы

Как и в Redux, в атомах рекомендуется хранить минимально возможный объем данных без повторений. Все производное состояние (которое можно вычислить) должно вычисляться. Для этого в Recoil есть селекторы. По сути это просто чистые функции, которые подписываются на изменение атомов (или других селекторов) и пересчитывают при необходимости свое значение. У селекторов тоже должно быть уникальное имя.

Вот так выглядит вычисление отфильтрованного списка элементов:

const filteredTodoListState = selector({
  key: "filteredTodoListState",
  get: function(get) {
    const filter = get(todoListFilterState);
    const todos = get(todoListState);

    switch (filter) {
      case 'completed':
        return todos.filter(function (todo) { return todo.isComplete });
      case ACTIVE:
        return todos.filter(function (todo) { return !todo.isComplete });
      default:
        return todos;
    }
  }
})

Внутри функции селектора есть доступ к функции get, которая и обеспечивает подписку на актуальное значение атома (или другого селектора).

Получение значений

Для получения значений атомов и селекторов есть хук useRecoilValue.

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

const todos = useRecoilValue(filteredTodoListState);

Изменение значений

Значение селектора нельзя изменить, так как оно вычисляемое. А для работы с атомами есть хук useRecoilState, который работает точно так же, как useState.

const [filter, setFilter] = useRecoilState(todoListFilterState);

Кроме того есть хук useSetRecoilState. Это по сути второй компонент хука useRecoilState, возвращает только функцию для изменения состояния (атома).

const setTodos = useSetRecoilState(todoListState);

Корневой элемент

Чтобы это все работало, приложение нужно обернуть в компонент RecoilRoot.

import { RecoilRoot } from "recoil";

Демо

Маленькое приложение (TODO-лист), демонстрирующее основы Recoil: https://codesandbox.io/s/recoil-react-junior-3orhdl?file=/src/App.js


#управлениесостоянием #recoil #примерыкода

Recoil. Асинхронное получение данных

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

export const currentUserNameQuery = selector({
  key: "CurrentUser",
  get: async function() {
    const response = await getCurrentUserInfo();
    if (response.error) {
      throw response.error;
    }
    return response.name;
  }
});

Селекторы с параметрами

Если в запрос нужно передать параметры, которые могут изменяться (например, id пользователя), то нужно использовать не просто селектор, а "семью селекторов" - функцию selectorFamily.
Интерфейс у нее похожий, только метод get - это функция, которая принимает необходимые параметры, а вернуть должна уже нормальную функцию-селектор:

export const userNameQuery = selectorFamily({
  key: "UserName",
  get: function (userId) {
    return async function() {
      const response = await getUserInfo(userId);
      if (response.error) {
        throw response.error;
      }
      return response.name;
    }
  }
});

Suspense

Компонент, который использует такой асинхронный селектор, может отрендериться раньше, чем будет выполнен запрос и получены данные. Чтобы этого не происходило, нужно обернуть этот компонент в React.Suspense https://yangx.top/react_junior/62. Recoil специально разработан для этой ситуации, поэтому React.Suspense знает, когда компонент готов к отображению, а до этого показывает фоллбэк.

Обработка ошибок

Также стоит заранее позаботиться об обработке ошибок и обернуть нужную часть приложения в ErrorBoundary (предохранитель) https://yangx.top/react_junior/54.

#управлениесостоянием #recoil #примерыкода #обработкаошибок

Recoil. Асинхронные данные без Suspense

Работать с асинхронным состоянием можно и без React.Suspense. В Recoil для этого есть хук useRecoilValueLoadable. Это почти то же самое, что и useRecoilValue (и useState), но кроме собственно значения (находится в поле contents) есть еще статус загрузки (в поле state). Статус может быть равен hasValue, loading или hasError.

const { state, contents } = useRecoilValueLoadable(userNameQuery(userId));

Пример: https://codesandbox.io/s/recoil-userecoilvalueloadable-react-junior-0tgwh7?file=/src/components/UserInfo.js

#управлениесостоянием #recoil #примерыкода

Селекторы в Recoil кешируются

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

Пример: https://codesandbox.io/s/recoil-cache-react-junior-198glr?file=/src/App.js

У нас есть атом userIdState, значение которого изменяется с помощью кнопок.

Есть селектор userDataQuery, который получает данные пользователя по его id. У пользователя есть поле changingField, это счетчик, значение которого увеличивается при каждом запросе. То есть два запроса с одинаковым id по идее должны вернуть разное значение changingField.

Однако Recoil не выполняет запрос для того же id повторно. Получив один раз данные для пользователя id: 1, он их кеширует.

#recoil #управлениесостоянием #примерыкода #документация

Класс Loadable

Статья в документации (англ.): https://recoiljs.org/docs/api-reference/core/Loadable

Объекты этого класса представляют состояние атома или селектора. У них есть следующие поля:

- state: hasValue, hasError, loading
- contents: тут лежит либо выполняющийся промис (если loading), либо объект выброшенной ошибки (если hasError), либо само значение атома/селектора (если hasValue)

Мы уже использовали такой Loadable-объект, его возвращает хук useRecoilValueLoadable.

Можно создать Loadable вручную, для этого нужен объект RecoilLoadable.

RecoilLoadable.of(123);

RecoilLoadable.error(new Error('ERROR'));

RecoilLoadable.all([
  RecoilLoadable.of(1),
  RecoilLoadable.of(10),
  RecoilLoadable.of(100),
]).map(([a, b, c]) => a+b+c);

Можно с асинхронными значениями:

RecoilLoadable.of('x');
RecoilLoadable.of(RecoilLoadable.of('x'));
RecoilLoadable.of(Promise.resolve('x'));

У Loadable есть несколько методов, но они все пока нестабильны:

- getValue()
- toPromise()
- valueMaybe()
- valueOrThrow()
- map(callback)

#recoil #управлениесостоянием #документация #примерыкода

Дефолтное значение атома

В поле default атома можно указать просто значение (примитив/объект).
Но также здесь может быть промис, Loadable, другой атом или селектор.

Пример: https://codesandbox.io/s/brave-fermi-40n0p8?file=/src/App.js

Обращаться с таким атомом нужно точно так же, как с асинхронным селектором: либо с React.Suspense, либо с хуком useRecoilValueLoadable.

#recoil #управлениесостоянием #документация #примерыкода

Что не так с "Голыми промисами" и чем их заменить

Статья (англ.): https://www.freecodecamp.org/news/naked-promises-are-not-safe-for-work/

Эта тема довольно часто поднимается в статьях: промисы в чистом виде не очень удобны.

Во-первых, их нельзя отменить (вообще можно, но это требует некоторого объема дополнительного кода).

Во-вторых, вызов промиса создает сразу несколько состояний, которые обычно нужно отслеживать (состояние загрузки, возможная ошибка выполнения).

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

В качестве решения проблемы автор предлагает просто обернуть промис, инкапсулировав всю дополнительную логику, и предлагает сразу несколько готовых пакетов (react-async, react-use, react-hooks-async).

#react #promise #patterns

atomFamily и selectorFamily

Это две полезные утилиты, которые позволяют создавать коллекции атомов или селекторов. Утилите нужно передать параметр, который по сути станет идентификатором значения.

При передаче разных параметров вернутся разные (разные экземпляры) атомы/селекторы, при передаче одного - один (причем даже в разных частях приложения).

Параметр при этом можно использовать.

Например, для определения дефолтного значения атома при создании:

const myAtomFamily = atomFamily({
    key: 'MyAtom',
    default: function(param) {
        return `atom-${param}`;
    } 
})

Или (как мы уже делали) как параметр запроса внутри селектора:

const mySelectorFamily = selectorFamily({
    key: 'MySelector',
    get: function(param) {
        return async function() {
            const response = await fetch(`/get-data?id=${param}`);
            return response;
        }
    }
})

Пример: https://codesandbox.io/s/recoil-atomfamily-react-junior-bj84yl

Создаем с помощью myAtomFamily два атома с разными параметрами (1 и 2). Их можно использовать и изменять отдельно. По этому параметру их можно получить в другом компоненте, при этом значение будет синхронизировано.

#recoil #управлениесостоянием #документация #примерыкода

atomFamily + selectorFamily

В атоме в качестве дефолтного значения можно указать другой атом или селектор.

Если мы создаем атомы через atomFamily, то в качестве дефолтного значения можно использовать selectorFamily. В селектор в этом случае будет передаваться параметр, переданный при создании атома.

const myAtomFamily = atomFamily({
  key: 'MyAtom',
  default: selectorFamily({
    key: 'MyAtom/Default',
    get: function(param) {
        // param - это параметр атома, atomFamily(param)
        
        return function({ get }) {
            // Это обычный селектор, он может быть асинхронным
        }
    }
  })
})

#recoil #управлениесостоянием #документация #примерыкода

14 лучших каруселей для React-проектов

Статья (англ.): https://medium.com/@vdas53073/14-top-react-carousel-components-2022-%EF%B8%8F-d89b4a84f249

14 готовых компонентов для реализации карусели на React. Кроме старых добрых Swiper, Slick, Owl Carousel есть еще много хороших решений на любой вкус.

#tools #library #react #interface

Recoil. Сброс кеша. 1 вариант

Мы уже увидели, что селекторы в Recoil кешируют полученные данные (с привязкой к своим зависимостям). Но иногда кеш нужно сбросить. Для этого есть несколько способов:

useRecoilRefresher()

Хук useRecoilRefresher_UNSTABLE получает селектор и возвращает функцию для сброса его кеша.

Работает и с обычным селектором, созданным с помощью selector, и с параметризованным селектором, созданным/полученным с помощью selectorFamily (в этом случае кеш сбрасывается только для одного параметра)ж

Пример 1: сброс обычного селектора (https://codesandbox.io/s/recoil-refresh-cache-1-react-junior-m9i09t?file=/src/components/UserInfo.js)
Пример 2: сброс селектора с параметром (https://codesandbox.io/s/recoil-refresh-cache-2-react-junior-secreg?file=/src/components/UserInfo.js)

#recoil #управлениесостоянием #документация #примерыкода

Recoil. Сброс кеша. 2 вариант

Другой вариант сбросить кеш селектора - использовать id запроса. Простыми словами, мы добавляем в селектор дополнительную зависимость. Если нужно обновить данные, просто изменяем значение этой зависимости и селектор перезагружается.

Для создания id запроса используем atomFamily, так для каждого значения параметра запроса будет свой личный атом id.

const userDataQueryRequestIdState = atomFamily({
  key: "UserDataQueryRequestId",
  default: 0
});

Добавляем в селектор новую зависимость:

const userDataQuery = selectorFamily({
  key: "UserDataQuery",
  get: (userId) => async ({ get }) => {
    get(userDataQueryRequestIdState(userId));

    const response = await getUserInfo(userId);

    if (response.error) {
      throw response.error;
    }
    return response;
  }
});

И пишем кастомный хук для обновления id запроса для конкретного параметра:

function useRefreshUserData(userId) {
  const setUserInfoQueryRequestId = useSetRecoilState(
    userDataQueryRequestIdState(userId)
  );
  return () => {
    setUserInfoQueryRequestId((requestId) => requestId + 1);
  };
}

Теперь просто вызываем этот хук с нужным параметром, когда требуется обновить данные.

Пример: https://codesandbox.io/s/recoil-refresh-cache-3-react-junior-rm4tll?file=/src/components/Refresh.js

#recoil #управлениесостоянием #документация #примерыкода

Recoil. Сброс кеша. 3 вариант

Самый простой вариант избежать кеширования данных - хранить состояние в атоме и обновлять его вручную (делать запрос в компоненте и устанавливать новое значение). В этом случае придется отдельно хранить также состояние запроса, так как React Suspense не узнает об этих изменениях.

#recoil #управлениесостоянием #документация

Эффекты атомов

В Recoil есть возможность устанавливать "эффекты" для атомов. Это похоже на хук useEffect - эффекты срабатывают при инициализации атома (при первом использовании внутри RecoilRoot).

Указывать эффекты нужно в массиве effects в определении атома:

const counterState = atom({
  key: 'Counter',
  default: 0,
  effects: [
    function() {
      console.log('Init atom effect');
    }
  ]
}) 

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

effects: [
  function() {
    const interval = setInterval(...);

    return function() {
      clearInterval(interval);
    }
  }
]

Каждый эффект в качестве аргумента принимает объект с кучей полезных методов. Среди них, например, onSet, который позволяет подписаться на изменение значения атома.

effects: [
  function({ onSet }) {
    onSet(function(newValue) {
      console.log('Atom value updated:', newValue);
    })
  }
]

Использовать эффекты атомов можно, например, для логирования или сохранения истории действий и функционала "Шаг назад".

Пример с логированием значений счетчика: https://codesandbox.io/s/recoil-atom-effects-react-junior-ukjg6f?file=/src/state.js

#recoil #управлениесостоянием #документация #примерыкода

Эффекты атомов

Пример использования эффектов атомов из документации (сихронизация значения атома с каким-то удаленным хранилищем):

const syncStorageEffect = function(userID) {
  return function({setSelf, trigger}) {
    // Установка значения при инициализации атома
    if (trigger === 'get') { 
      setSelf(myRemoteStorage.get(userID)); // Выполнятся синхронно при инициализации
    }

    // Подписка на удаленное хранилище и синхронизация значений
    myRemoteStorage.onChange(userID, function(userInfo) {
      setSelf(userInfo); // Выполняется асинхронно при изменении значения
    });

    // Сброс подписки на хранилище
    return function() {
      myRemoteStorage.onChange(userID, null);
    };
  }
};

const userInfoState = atomFamily({
    key: 'UserInfo',
    default: null,
    effects: userID => [
      syncStorageEffect(userID),
    ],
  })

1) Эффекты можно использовать и с семьей атомов, просто вместо массива функций-эффектов должна быть функция, которая возвращает массив функций-эффектов.

2) Параметр trigger обозначает действие, которое вызвало инициализацию атома.

3) Метод setSelf позволяет переписать значение атома изнутри эффекта.

#recoil #управлениесостоянием #документация #примерыкода

Эффекты атомов

Итак, метод onSet внутри эффекта позволяет подписаться на изменения значения атома, а метод setSelf позволяет изменить это значение.
Чтобы не возникало зацикливание, подписка onSet не срабатывает при изменениях через setSelf.

#recoil #управлениесостоянием #документация