Redux также можно использовать с другими фреймворками или библиотеками.
Он служит
централизованным хранилищем, которое используется для управления состоянием в
приложении, что упрощает управление состоянием во всем приложении и позволяет нам
прогнозировать поведение с помощью набора правил.
Redux Toolkit предоставляет инструменты для настройки хранилища и выполнения
наиболее распространенных операций, а также содержит полезные утилиты, позволяющие
упростить код.
С точки зрения кода, Redux — это объект с данными внутри. Остальные части
приложения используют этот объект, чтобы хранить, изменять и извлекать данные. В
терминологии Redux этот объект называется хранилищем (store).
Redux базируется на трех принципах, из которых следует характер работы с ним.
Единый источник состояния. Все данные о состоянии приложения хранятся в одном
месте, без копий. Глобальное состояние организовано как дерево объектов и
называется state tree. Также используются термины «источник состояния» и
«хранилище». Оба означают местонахождение глобального состояния. Единый источник
нужен для централизации и отладки приложения. Работа становится проще, если данные
находятся в одном месте.
Доступ к состоянию — только для чтения. Глобальное состояние заблокировано для
записи. Компоненты приложения могут читать из него, но не переписывать по своему
желанию. Это предотвращает непредсказуемые изменения. Ситуаций, когда объект
изменился, а функции об этом не узнали, не бывает. При изменениях в состояние нужно
отправить действие (action). Специальный объект сообщит о произошедшем.
Экшены — это структуры, которые передают данные из вашего приложения в стор. Они
являются единственными источниками информации для стора. Вы отправляете их в стор,
используя метод store.dispatch(). Экшены — это обычные JavaScript-объекты. Экшены
должны иметь поле type, которое указывает на тип исполняемого экшена. Типы должны
быть, как правило, заданы, как строковые константы. После того, как ваше приложение
разрастется, вы можете захотеть переместить их в отдельный модуль.
Редюсер (reducer) — это чистая функция, которая принимает предыдущее состояние и
экшен (state и action) и возвращает следующее состояние (новую версию предыдущего).
«slice» — это набор логики и действий редуктора Redux для одной функции вашего
приложения, обычно определяемых вместе в одном файле.
configureStore — функция, предназначенная упростить процесс создания и настройки
хранилища;
Мидлвары (middlewares) — это функции, которые последовательно вызываются во время
обновления данных в хранилище. Они относятся к продвинутым техникам использования
Redux.
createSlice(): принимает объект, содержащий редуктор, название части состояния
(state slice), начальное значение состояния, и автоматически генерирует частичный
редуктор с соответствующими создателями и типами операции.
Когда вы вызываете createSlice, вы указываете:
name: Имя слайса, которое будет использоваться для идентификации (например, posts).
initialState: Начальное состояние для этого слайса.
reducers: Набор функций-редьюсеров, которые будут обновлять состояние, когда
происходят определённые действия.
createReducer(): позволяет использовать таблицу поиска (lookup table) операций для
редукторов случая (case reducers) вместо инструкций switch. В данном API
используется библиотека immer, позволяющая напрямую изменять иммутабельный код,
например, так: state.todos[3].completed = true.
createAction(): генерирует создателя операции (action creator) для переданного типа
операции. Функция имеет переопределенный метод toString(), что позволяет
использовать ее вместо константы типа.
Если вы не уверены, куда что-то поместить, вот несколько общих правил для
определения того, какие данные следует поместить в Redux:
Заботятся ли другие части приложения об этих данных?
Нужно ли вам иметь возможность создавать дополнительные производные данные на
основе этих исходных данных?
Используются ли одни и те же данные для управления несколькими компонентами?
Есть ли для вас ценность в возможности восстановить это состояние на заданный
момент времени (т. е. отладка с перемещением во времени)?
Хотите ли вы кэшировать данные (т. е. использовать то, что находится в состоянии,
если оно уже есть, вместо повторного запроса)?
Хотите ли вы сохранять эти данные согласованными при горячей перезагрузке
компонентов пользовательского интерфейса (которые могут потерять свое внутреннее
состояние при замене)?
useSelector — это хук из библиотеки React-Redux, который позволяет компонентам
React доступаться к данным из хранилища Redux (store). Когда мы используем Redux,
все данные приложения хранятся в одном месте — в хранилище (store). useSelector
позволяет "вытащить" из хранилища только нужные части данных и использовать их в
компонентах React.
useDispatch — это хук из библиотеки React-Redux, который позволяет компонентам
React отправлять действия (actions) в хранилище Redux (store). Если useSelector
вытаскивает данные из хранилища, то useDispatch отправляет действия, которые
изменяют эти данные.
