Доступ к глобальному состоянию 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 действиях для облегчения тестирования и инъекции зависимостей. - Избегание прямого импорта хранилища: Не импортируйте хранилище прямо в функции создания действий, чтобы упростить тестирование и обеспечить совместимость с серверным рендерингом.
Организация асинхронных запросов
Управление асинхронными запросами оптимизируется за счёт чётко определённых действий:
- Выполнение
REQUEST_LOAD
сообщает о начале загрузки. - Успешное получение данных сопровождается действием
SUCCESS
. - Процедура обработки ошибок должна включать выполнение действия
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, которая обеспечивает понятное управление.
Следуйте принципу минимальной достаточности: извлекайте в компонентах только нужную информацию о состоянии и действиях. Это улучшает изоляцию компонентов и упрощает тестирование.
Полезные материалы
- Понимание посреднического ПО в Redux — Содержательные сведения о посредническом ПО в Redux для управления побочными эффектами.
- Хуки React Redux — Продвинутые рекомендации по использованию хуков React Redux для доступа к состоянию в функциональных компонентах.
- Основы Redux, Часть 7: Стандартные паттерны Redux — Узнайте стандартные паттерны для создания redux-действий.
- GitHub – reduxjs/redux-thunk: Посредническое ПО Thunk для Redux — Изучите код и документацию Redux Thunk, предназначенного для асинхронных действий.
- Connect: Отправка действий с помощью mapDispatchToProps | React Redux — Инструкции по сопоставлению действий с компонентами.
- Redux-Saga – Интуитивно понятный менеджер побочных эффектов для Redux. | Redux-Saga — Обучающий материал по Redux-Saga для управления сложной асинхронной логикой.