Для моего финального проекта я знал, что многим из моих компонентов потребуется доступ к одному и тому же состоянию. Мы лишь кратко рассмотрели Redux в конце последней фазы, но я знал, насколько полезным он будет для управления некоторыми значениями состояния. Кроме того, я хотел получить некоторый опыт работы с ним. Я решил взяться за него и учиться по мере продвижения, и очень быстро обнаружил, что моя установка отличается от примеров, которые я нашел в Интернете, а также от других участников моей группы, которые также использовали Redux. Именно тогда я понял, что в моей установке реализована библиотека Redux Toolkit, которая во многом упрощает процесс редукции. Ниже показано, как я настроил базовый Redux для моего финального проекта.
Для начала я установил библиотеки React-Redux и Redux Toolkit:
npm install @reduxjs/toolkit react-redux
Затем я создал пользовательский фрагмент, используя хук createSlice, предоставленный Redux Toolkit. Хук createSlice — это функция, которая принимает начальное состояние, объект, полный функций редуктора и «имя среза, и автоматически генерирует создателей действий и типы действий, которые соответствуют редукторам и состоянию». Значение имени равно строка, которая будет использоваться в типах действий. Значение initialState — это объект с начальным состоянием для редуктора, а имена ключей будут использоваться для действий. Значение редукторов — это объект редукторов case, где имена ключей являются типами действий.
Затем я настроил свой файл хранилища, используя хук configureStore, который предоставляется Redux Toolkit, и импортировал редукторы слайсов. configureStore — это дружественная абстракция над стандартной функцией Redux createStore, которая добавляет хорошие значения по умолчанию в настройку магазина для лучшего опыта разработки.»
Затем я подключил свой магазин к моему приложению через файл index.js, используя хук провайдера и передав магазин в качестве реквизита провайдеру:
После настройки я смог получить доступ к значениям состояния, импортировав хук useSelector в любой компонент:
Чтобы отправить действие из любого компонента, мне нужно было только импортировать хук useDispatch, а также любые создатели действий из моих файлов фрагментов. Затем мне нужно было вызвать хук useDispatch, установив для него переменную dispatch. После этого я смог вызвать диспетчер действия с создателем действия в любом месте внутри компонента. В этом случае я отправил создателя действия addTransaction с объектом в качестве полезной нагрузки.
Это был мой первый раз, когда я работал с Redux, и хотя это очень простая реализация, она дала мне представление о его силе и полезности. Я только окунулся в Redux, но то, что я узнал и смог сделать, только побудило меня узнать больше. Настройка может быть утомительной, но ее упрощает использование библиотеки Redux Toolkit. После настройки мне показалось, что это действительно сэкономило мне время, поскольку мне не нужно было постоянно передавать данные между компонентами. Redux не всегда может быть лучшим выбором, но это полезная опция для управления часто используемыми значениями состояния.
Ресурсы:
