Введение:
Redux — одна из самых популярных библиотек javascript для управления и централизации состояния в приложении. Созданный Дэном Абрамовым и Эндрю Кларком в 2016 году, он с тех пор стал широко использоваться с такими библиотеками, как React, Angular и другими популярными внешними библиотеками для создания пользовательских интерфейсов.
Настройка занимает некоторое время, поэтому он в основном используется для приложений среднего и крупного размера, но управление состоянием становится проще после завершения настройки. Redux делает состояние приложения доступным глобально и, следовательно, избегает необходимости передавать реквизиты без необходимости (отработка реквизитов).
Эта настройка будет предназначена для старого, а не для нового набора инструментов для сокращения, так как большинство существующих реагирующих приложений, скорее всего, не будут иметь набора инструментов для сокращения, и его сложнее настроить.
НАСТРОЙКА:
Для начала сначала установите следующие пакеты: redux, react-redux и redux-thunk.
Следующий шаг — настройка магазина:
Хранилище — это неизменяемый объект, который содержит состояние приложения. Данные в хранилище нельзя изменить, кроме как путем отправки действия, которое будет объяснено по мере продвижения вперед. Обычно он настраивается в индексном файле, как показано ниже.
Сначала мы импортируем Provider из react-redux, который используется для того, чтобы сделать хранилище доступным глобально для нашего приложения, затем мы импортируем createStore, который используется для настройки нашего хранилища, и первым аргументом должны быть наши редукторы, которые мы скоро настроим. Промежуточное ПО thunk применяется для того, чтобы вы могли вызывать создателей действий, которые возвращают функции вместо объектов, которые будут видны при настройке и отправке наших действий.
Следующий шаг — настройка редукторов:
Мы создаем папку редукторов в src, затем мы создаем индексный файл для экспорта всех наших редукторов, так как у вас может быть много файлов редукторов. Метод combReducer делает это возможным.
В приведенном выше фрагменте кода импортированное содержимое является редуктором, у нас могло бы быть намного больше. Экспорт здесь — это то, что импортируется в наш indexjs, где мы настроили наш магазин.
Редуктор — это просто функция, которая принимает состояние, и действие для манипулирования состоянием, а условный оператор используется для манипулирования состоянием на основе типа действия.
Выше показан редюсер с двумя определенными типами действий.
Следующий шаг – определение возможных действий:
Действия — это объекты JavaScript, которые содержат такие свойства, как тип, который используется для определения условия для запуска в методе редуктора, а затем полезную нагрузку, то есть данные, с помощью которых будет управляться состояние.
Метод действия getContents использует хук Axios для получения данных с https://jsonplaceholder.typicode.com, а дополнительная функция со стрелкой представляет собой синтаксис redux-thunk, который позволяет нам извлекать асинхронные данные. Это возможно из-за промежуточного программного обеспечения redux-thunk, переданного в начале.
После этого мы практически закончили с нашей настройкой. Нам просто нужно отправить действие и получить данные из хранилища в компонент, где это необходимо.
Выше, отправка действия с использованием хука useDispatch, а затем передается созданный нами метод действия. Затем он отправляет тип и полезную нагрузку из метода getContents. Не то чтобы мы могли легко передать объект { type: «GET_CONTENTS», payload: data } прямо здесь, но это, безусловно, лучший способ сделать это.
Теперь, чтобы получить эти данные там, где это необходимо, мы используем хук useSelector из react-redux.
Теперь мы просто используем хук, который дает нам доступ ко всему нашему состоянию, и затем мы можем вернуть наше содержимое, так как у нас есть наш редьюсер содержимого. Если бы у нас был другой редуктор, мы могли бы его вернуть.
В целом, это может быть много для настройки, но, в конце концов, это становится простым процессом, когда настройка завершена. Инструментарий Redux — это новый рекомендуемый пакет, реализующий Redux. Его проще настроить, и я расскажу об этом позже.
Пожалуйста, поставьте лайк, если это было полезно.
Ссылки:
