Бесспорно, управление состоянием — одна из причин, почему с React приятно работать. знание того, как управлять несколькими состояниями в React и отслеживать их без нарушения кода или внесения новой ошибки в кодовую базу, позволит вам почувствовать себя богом программирования. Список того, чего вы можете достичь, обладая этой сверхспособностью, бесконечен.
Мы увидим, как легко приобрести эту сверхспособность. К этому моменту я предполагаю, что вы уже знаете, как запустить среду React.
Что такое Redux?
Что такое Redux Toolkit?
Redux — это инфраструктура управления состоянием, которая помогает упростить управление несколькими состояниями в приложении. Вам необходимо отслеживать состояние, чтобы определить действие, которое будет выполняться в каждой точке вашего кода. Важно отметить, что Redux также можно использовать с другими фреймворками, а не только с React.
Redux Toolkit включает в себя все инструменты, необходимые для успешной работы с Redux. Согласно официальной документации Redux, «пакет инструментов redux предназначен для стандартного способа написания логики сокращения».
Redux Toolkit был создан для решения следующих проблем
1. Настройка редукционного хранилища слишком сложна.
2. Добавление большого количества пакетов в другие, чтобы запустить редукс.
3. Redux требует слишком много шаблонного кода.
Чтобы решить все эти проблемы, команда redux решила сделать большую часть работы за кулисами за нас, так что нам нужно беспокоиться только о написании нашего кода.
Итак, давайте начнем с добавления инструментария redux в наш проект.
Шаг 1. Для нового проекта реагирования запустите в терминале
npx create-react-app my-app --template redux
существующий запуск проекта
npm установить @reduxjs/toolkit
Шаг второй:настройте магазин. Магазин даст вам возможность делиться своими значениями состояния по всей кодовой базе с любым компонентом, которому требуется определенное значение состояния. думайте об этом как о традиционной реакции useContext.
Шаг третий: импортируйте ваш store.js и Provider в основной файл index.js вашего приложения.
Шаг четвертый: создайте папку функций, в которой вы будете хранить все различные функции, которые собираетесь добавить в свое приложение. затем создайте подпапку для каждой из функций,
C:\Users\23470\OneDrive\Desktop\note-app\src\features\whateverName
затем создайте файл whatNameSlice.js внутри папки whatName.
Шаг пятый: импортируйте файл whatNameSlice.js в ваш store.js как whaeverNameReducer.
Шаг шестой: чтобы получить доступ к вашим значениям состояния, перейдите к компоненту, значение которого необходимо, и импортируйте useSelector из react-redux, который даст вам доступ к вашим значениям состояния.
теперь мы можем получить доступ к нашему значению состояния из любого места в нашем приложении. Примечание: вы можете импортировать селектор использования в любой компонент, которому требуется значение состояния, и деструктурировать его, чтобы получить от него нужные вам значения состояния.
Шаг седьмой:давайте создадим действия для отправки
после создания действий для выполнения над состоянием
перейдите к компоненту, из которого вы хотите отправить действия
Шаг восьмой: импортируйте useDispatch из react-redux, а также импортируйте действия, которые вы хотите отправить, из whatName.
Ура, мы успешно подключили наш редукс к реакции. с этого момента нет предела тому, чего вы можете достичь. есть еще некоторые дополнительные функции, которые есть у набора инструментов для реагирования.
Как только вы узнаете, как успешно связать свой Redux и реагировать на совместную работу, вы можете начать использовать другие расширенные фрагменты Redux-toolkit.
это ссылка на официальную документацию по инструментарию Redux
Документация Redux Toolkit https://redux-toolkit.js.org/introduction/getting-started
Удачного кодирования. хохо
