Зарегистрируйтесь для доступа к 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: usersAdapter.removeOne,
    updateUser: usersAdapter.updateOne,
  },
});

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

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

Буквально 4 строчки в редьюсерах и мы получили полноценную реализацию стандартных операций над пользователем. Но это еще не все, кроме готовых редьюсеров, 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. Создание своих селекторов

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

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

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

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

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

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

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

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

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

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

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

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

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

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов веб-приложений
25 мая 10 месяцев

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

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

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

Даю согласие на обработку персональных данных, соглашаюсь с «Политикой конфиденциальности» и «Условиями оказания услуг»