Доступ к глобальному состоянию Redux из action creator

Быстрый ответ

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

Ниже приведён пример использования:

const accessStateAction = () => (dispatch, getState) => {
  const state = getState();
  dispatch({ type: 'ACTION_TYPE', payload: state.someData });
};

Для взаимодействия со состоянием, вызовите accessStateAction.

Именно благодаря Redux Thunk ваши функции создания действий получают возможность надёжно считывать состояние. Этот шаблон (паттерн), который активно советуют использовать ключевые персоны из сообщества Redux, такие как Дэн Абрамов и Марк Эриксон, облегчает разработку безопасного и легкого в поддержке кода.

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

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

Если вам требуется управление состоянием и побочными эффектами, используйте такое посредническое ПО (middleware), как Redux Thunk или Redux-Saga для более сложной оркестрации.

Связь между состоянием и действиями вашего хранилища Redux с компонентами React осуществляется с использованием mapStateToProps и mapDispatchToProps библиотеки react-redux.

Практические рекомендации по работе с состоянием Redux

Получение доступа к определённым элементам состояния через Thunk

Redux Thunk предоставляет доступ к требуемым частям состояния, что помогает эффективно разграничить слои данных и пользовательского интерфейса:

• Сбор данных: Используйте селекторы для извлечения нужных частей состояния для ваших действий.
• Рефакторинг и внедрение зависимостей: Применяйте withExtraArgument в Thunk действиях для облегчения тестирования и инъекции зависимостей.
• Избегание прямого импорта хранилища: Не импортируйте хранилище прямо в функции создания действий, чтобы упростить тестирование и обеспечить совместимость с серверным рендерингом.

Подробнее об этом расскажет наш спикер на видео

Организация асинхронных запросов

Управление асинхронными запросами оптимизируется за счёт чётко определённых действий:

1. Выполнение REQUEST_LOAD сообщает о начале загрузки.
2. Успешное получение данных сопровождается действием SUCCESS.
3. Процедура обработки ошибок должна включать выполнение действия FAIL.

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

Упрощение процесса создания действий

Создания действий не должно включать избыточной логики. Важные аспекты:

• Одна задача — одна ответственность: Функции создания действий должны быть сфокусированы на одной работе.
• Сепарация асинхронного кода: Разделяйте обязанности, выполняя различные действия в зависимости от результатов запроса.
• Современный подход: Для сложных действий рассмотрите использование таких структур, как redux-tiles, или организуйте несколько действий в одном Thunk.

Визуализация

Представьте себе состояние Redux в виде карты сокровищ (🗺️), а функции создания действий — как сокрователей (🧭):

Redux State (🗺️): { gold: 100, pirates: ['Чёрная Борода', 'Бонни'] }
Action Creator (🧭): dispatch(fetchPirates())

Функции создания действий (исследователи) используют свой компас (getState), чтобы брать требуемые данные с карты:

function fetchPirates() {
  return (dispatch, getState) => {
    const { pirates } = getState().treasureMap;
    dispatch({ type: 'PIRATES_FETCHED', payload: pirates });
  };
}

С помощью этого "компаса" вы сможете чётко и точно передавать нужные данные с "карты сокровищ".

Компоненты используют хуки, такие как useSelector, чтобы подписываться на конкретные изменения состояния Redux при выполнении действий. Этот подход идеально сочетается с функциональными компонентами и обновлением только по необходимости.

Для управления комплексной асинхронной логикой может пригодиться использование Redux-Saga, которая обеспечивает понятное управление.

Следуйте принципу минимальной достаточности: извлекайте в компонентах только нужную информацию о состоянии и действиях. Это улучшает изоляцию компонентов и упрощает тестирование.

Полезные материалы

1. Понимание посреднического ПО в Redux — Содержательные сведения о посредническом ПО в Redux для управления побочными эффектами.
2. Хуки React Redux — Продвинутые рекомендации по использованию хуков React Redux для доступа к состоянию в функциональных компонентах.
3. Основы Redux, Часть 7: Стандартные паттерны Redux — Узнайте стандартные паттерны для создания redux-действий.
4. GitHub – reduxjs/redux-thunk: Посредническое ПО Thunk для Redux — Изучите код и документацию Redux Thunk, предназначенного для асинхронных действий.
5. Connect: Отправка действий с помощью mapDispatchToProps | React Redux — Инструкции по сопоставлению действий с компонентами.
6. Redux-Saga – Интуитивно понятный менеджер побочных эффектов для Redux. | Redux-Saga — Обучающий материал по Redux-Saga для управления сложной асинхронной логикой.