Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Механизм Entity Adapter React: Redux Toolkit

Значительная часть любого веб-приложения сводится к операциям над сущностями — добавлению, изменению, удалению и чтению. Например, на Хекслете в каждом уроке есть раздел обсуждений, в котором студенты задают вопросы. Эта часть фронтенда работает с постами, комментариями, авторами и лайками. Благодаря нормализации данных, код по обработке этих сущностей выглядит идентично:

const addPost = (state, post) => {
  state.entities[post.id] = post;
  state.ids.push(post.id);
};

const addLike = (state, like) => {
  state.entities[like.id] = like;
  state.ids.push(like.id);
};

Точно такой же код будет использоваться и для всех остальных сущностей. Можно ли как-то переиспользовать его? Конечно! Redux Toolkit делает это с помощью механизма Entity Adapter. Он предоставляет набор готовых редьюсеров и селекторов для основных операций над сущностями. Сначала рассмотрим пример:

import {
  createSlice,
  createEntityAdapter,
} from '@reduxjs/toolkit';

const usersAdapter = createEntityAdapter();

// По умолчанию: { ids: [], entities: {} }
const initialState = usersAdapter.getInitialState();

const slice = createSlice({
  name: 'users',
  initialState,
  reducers: {
    addUser: usersAdapter.addOne,
    addUsers: usersAdapter.addMany,
    // Если нужна дополнительная обработка, то создаем свою функцию
    removeUser: (state, { payload }) => {
      // ...
      // Внутри можно вызвать метод адаптера
      usersAdapter.removeOne(state, payload);
    },
    updateUser: usersAdapter.updateOne,
  },
});

// Где-то в приложении

// По соглашению, в передаваемых данных должен быть id для правильной работы
dispatch(addUser(user));
// Данные передаются в формате: { id, changes }
dispatch(updateUser({ id: user.id, changes: data }));
// Достаточно передать идентификатор
dispatch(removeUser(user.id));

Буквально четыре строчки в редьюсерах, и мы получили полноценную реализацию стандартных операций над пользователем. Но это еще не все. Кроме готовых редьюсеров, Entity Adapter дает нам набор готовых селекторов для извлечения данных из хранилища. Для этого их нужно сгенерировать и экспортировать из файла со слайсом:

// file: usersSlice.js

// Колбек определяет базовый селектор
// Селектор извлекает нужную часть состояния из глобального состояния Redux
// Для слайса users — это state.users
export const selectors = usersAdapter.getSelectors((state) => state.users);

Изучим пример использования в приложении:

import { useSelector, useDispatch } from 'react-redux';

import { selectors } from '../slices/usersSlice.js';

const MyComponent = (props) => {
  // Извлекаем всех пользователей в виде массива
  // Внутри происходит выборка данных из state.users.entities
  // Выборка отсортирована по state.users.ids
  const users = useSelector(selectors.selectAll);

  // Здесь логика вывода
}

Кроме selectAll(state), мы получаем:

  • selectIds(state) – возвращает ids
  • selectEntities(state) – возвращает entities
  • selectTotal(state) – возвращает общее количество
  • selectById(state, id) – возвращает конкретную сущность или undefined, если ничего не найдено
// id — это какой-то идентификатор
const user = useSelector((state) => selectors.selectById(state, id));

Дополнительные материалы

  1. Что такое CRUD?
  2. Документация createEntityAdapter
  3. Создание своих селекторов

Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты

Об обучении на Хекслете

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы
профессия
от 6 300 ₽ в месяц
Разработка фронтенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 4 апреля
профессия
от 9 900 ₽ в месяц
Разработка фронтенд- и бэкенд-компонентов для веб-приложений
16 месяцев
с нуля
Старт 4 апреля

Используйте Хекслет по-максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»