На этой неделе я решил углубиться в Redux… вот что я узнал.
Почему Redux?
В React состояния/реквизиты/данные передаются от компонента к компоненту в каскадном формате («проп-бурение») — для этого процесса необходимы деревья компонентов.
Часто я открывал неправильное дерево компонентов по мере того, как углублялся в проект; Я обнаружил, что перемещаю свойства и состояния «на уровень выше», чтобы больше компонентов могли получить доступ к данным. Я переходил от одного компонента к другому… пытаясь найти, где вложены исходные данные/состояние. Это было особенно сложно, когда данные усложнялись… что приводило к многочисленным вкладкам VSCode и хаосу.
Недавно я решил поковыряться в Redux, который, как я слышал, может решить упомянутые выше проблемы. Мой процесс обучения был пугающим, учитывая расширенный синтаксис и процессы установки Redux… поэтому я решил задокументировать части этой головоломки ниже.
Общий цикл:
Store → Action Creator (функции) → Actions (тип действия, полезная нагрузка) → Dispatch (встроено в действия) → Reducer
Как это настроить?
Перед запуском установите npm:
реакция-редукс
редукционный преобразователь
Шаг 1. «Открыть/создать» магазин
Подумайте о банке. В банке хранится информация о деньгах/пользователях (например, данные), к которым могут получить доступ все компоненты приложения («глобальное состояние»).
- Обязательно добавьте redux-thunk!
Шаг 2. Подключите магазин к компонентам React через ‹Provider›.
Это должно быть в корневом компоненте приложения React.
Шаг 3: подключите магазин к компонентам React через { useSelector }
{ useSelector } вызывает определенные состояния из хранилища
Шаг 4: создайте действия с помощью создателей действий + подготовьте их к отправке в редюсер + объедините и импортируйте их в приложение React
Например, когда мы идем в банк, у нас есть несколько вариантов/действий — мы можем:
- снять деньги
- внести деньги
Теперь нам нужно будет импортировать эти действия в App.js.
Шаг 5: создайте + объедините редукторы (для действий, которые выполняются в магазине)
Редукторы содержат информацию, которая может изменить состояние элементов в «магазине» на основе действий, описанных в магазине. С технической точки зрения редьюсер — это функция, которая в конечном итоге возвращает состояние.
У нас может быть много разных редукторов; в контексте банка… у нас могут быть редукторы, которые, например:
- манипулировать суммой денег на нашем банковском счете
Нам также нужно объединить редукторы для легкого доступа в приложении React. Это также будет импортировано в «магазин».
Это основные элементы для соединения React с Redux!
