Централизованное хранилище состояния приложений с постоянством
Что такое Реакт Редукс?
React Redux — это централизованное состояние, которое позволяет отделить ваше состояние от отдельных компонентов. Это позволяет легко обмениваться и синхронизировать состояние приложения между компонентами, устраняя необходимость в ненужных цепочках состояний.
В этой статье я расскажу о том, как настроить Redux Store в любом приложении React. Полный репозиторий для этого проекта будет связан в конце статьи.
1. Creating the Redux Store 2. Modifying State with Reducers 3. Importing State and Reducers into Components 1. Function Component 2. Class Component 4. Adding Persistence
Создание магазина Redux
Чтобы добавить магазин Redux в наше приложение, нам сначала нужно импортировать React-Redux и Redux Toolkit.
npm i react-redux @reduxjs/toolkit
Теперь мы готовы настроить наш магазин Redux. Хранилище Redux состоит из двух основных компонентов: самого хранилища и среза данных. Магазин, по сути, представляет собой оболочку, которая обрабатывает ввод фрагмента данных в ваше приложение. Сам срез данных — это место, где живут состояние и редукторы.
Начнем с создания среза данных. Мы используем метод из Redux Toolkit, createSlice, для создания среза данных. Этот метод принимает объект JSON, содержащий имя нашего фрагмента данных, объект initialState и объект редукторов.
При экспорте нашего среза данных мы создаем два оператора экспорта. Один для методов редуктора, DataSlice.actions, и другой экспорт по умолчанию для самого среза данных, DataSlice.reducer. Этот экспорт по умолчанию может немного сбивать с толку, так как может показаться, что это должны быть только методы редуктора. Экспорт по умолчанию — это то, что передается в нашу оболочку хранилища избыточности.
Теперь, когда у нас есть срез данных, мы можем создать наш магазин. Хранилище довольно простое и создается путем передачи нашего фрагмента данных методу Redux Toolkit configureStore. Затем мы экспортируем наш магазин, чтобы позже внедрить его в наше приложение.
Как только наш магазин создан, нам нужно внедрить его в наше приложение. Мы делаем это, оборачивая наше приложение в компонент Provider из React-Redux. Компонент Provider использует наш магазин в качестве опоры, что позволяет нам позже импортировать его в наши компоненты.
Изменение состояния с помощью редукторов
Методы редуктора состоят из двух параметров, state и actions. Состояние всегда будет текущим состоянием приложения и передается автоматически. Действия — это объект JSON, состоящий из двух переменных, type и payload . Тип будет автоматически установлен на имя вашего среза данных и метода редуктора, dataSlice/updateMessage в нашем примере. Полезная нагрузка будет состоять из данных, которые мы передаем в метод редуктора из наших компонентов.
Следует иметь в виду один ключевой момент: полезная нагрузка может состоять только из одной точки данных. Из-за этого, если нам нужно передать несколько значений в наш метод редуктора, нам нужно будет передать их полезной нагрузке с помощью объекта JSON.
При обновлении состояния с помощью избыточности нам не нужно беспокоиться об изменении действий. Redux автоматически обрабатывает клонирование и создание новых объектов в состоянии. Благодаря этому мы можем напрямую обновлять состояние в наших редьюсерах.
Импорт состояния и редукторов в компоненты
Теперь, когда у нас есть состояние и редукторы, мы можем импортировать их в наши компоненты. Существуют разные способы импорта состояния и редукторов в зависимости от использования функциональных компонентов или компонентов класса. Я начну с демонстрации использования хуков в функциональных компонентах.
Функциональный компонент
Мы будем использовать два хука, useSelector и useDispatch, из React Redux, чтобы импортировать наше состояние и редукторы в наш функциональный компонент. Хук useSelector позволяет нам выбрать определенное значение состояния из нашего среза данных и сохранить его как локальную переменную. Хук useDispatch дает нам возможность вызывать редукторы непосредственно из нашего компонента.
Компонент класса
Что касается компонентов класса, у нас нет доступа к хуку, поэтому мы будем использовать другой подход. Этот метод импорта состояния и редукторов также работает в функциональных компонентах, однако я настоятельно рекомендую вместо этого использовать метод ловушки.
Для компонентов класса мы будем использовать метод connect из React-Redux. Этот метод аналогичен методу withStyles, обычно используемому для импорта стилей. Метод подключения принимает до двух параметров: один для импорта состояния, а другой для редукторов.
Мы будем импортировать как состояние, так и редукторы, используя методы mapStateToProps и mapDispatchToProps соответственно. Оба этих метода вернут объект, содержащий состояние и редукторы, необходимые для нашего компонента. mapStateToProps имеет два параметра: state и ownProps. Параметр состояния заполняется автоматически и является объектом состояния из нашего среза данных, а ownProps может использоваться для передачи локальных свойств состояния. mapDispatchToProps имеет единственный параметр dispatch, который автоматически заполняется методом отправки, аналогичным хуку useDispatch.
Затем метод connect привяжет состояние и редукторы к нашим свойствам, что позволит нам получить к ним доступ с помощью this.props.<state or reducer> .
Добавление постоянства
В этом разделе я расскажу, как добавить постоянство в наш магазин Redux, чтобы сохранить данные при обновлении страницы. Это не обязательно для самого Redux и просто зависит от вашего варианта использования.
При добавлении постоянства в наше приложение нам сначала нужно будет импортировать дополнительную библиотеку Redux Persist.
npm i redux-persist
После установки Redux Persist нам нужно будет внести некоторые изменения в наш магазин Redux и файлы index.html. Начнем с нашего магазина Redux.
На первый взгляд, это сильно отличается от нашей оригинальной реализации магазина. Основные изменения связаны с оберткой нашего фрагмента данных и хранилища в методах Redux Persist persistReducer и persistStore соответственно.
Метод persistReducer позволяет нам передавать наш срез данных, а также конфигурацию сохранения. Эта конфигурация позволяет нам контролировать, как будет сохраняться наш магазин. Основная конфигурация, о которой следует помнить, — это место, где будет храниться хранилище. В этом примере мы используем локальное хранилище браузера, используя следующий импорт import storage from ‘redux-persist/lib/storage'.
Вариантов, где сохранить наш магазин, довольно много и все они можно найти здесь.
В дополнение к настройке нашего фрагмента данных нам также необходимо добавить дополнительную конфигурацию в хранилище. Эта конфигурация представлена в виде промежуточного программного обеспечения. Persistence использует сериализуемую проверку, чтобы убедиться, что данные, которые мы храним, сериализуемы. Однако мы не хотим, чтобы эта проверка выполнялась для определенных действий, выполняемых самим Redux Persist.
Как только наше промежуточное ПО настроено, мы оборачиваем наш магазин в persistStore, позволяя Redux Persist управлять им. Нам также нужно будет экспортировать как наш магазин, так и этот новый персистент, возвращенный из persistStore. Теперь, когда наш магазин перенастроен для постоянства, нам нужно внедрить наш сохранятель в наше приложение.
Чтобы внедрить наш персистент, мы будем использовать компонент PersitGate, предоставленный Redux Persist. Этот компонент будет подкомпонентом нашего компонента Provider и будет охватывать остальную часть нашего приложения.
Подведение итогов
Мы успешно добавили магазин Redux в наше приложение для реагирования, а также добавили постоянство в наш магазин. Как и было обещано, репо для этого проекта можно найти ниже. Есть две ветки, main и react-persist. Main имеет базовую настройку redux, в то время как react-persist имеет добавление постоянства.
