Если вы использовали React, возможно, вы знакомы с головной болью, связанной с обратным потоком данных. Передача состояния реквизитам от родительских компонентов к дочерним компонентам может быстро запутаться, чем сложнее становится ваше приложение. Ну, вот где Redux вступает в игру.

Это выводит логику из ваших реагирующих компонентов. Redux вводит глобальное состояние через хранилище redux. Хранилище отправляет действия редьюсеру, а редьюсер обновляет состояние хранилища. Если вы не понимаете это предложение прямо сейчас, это нормально, но это ключ к пониманию того, как работает Redux и как его использовать. возможность написать свой код. Тем не менее, этот блог предназначен для тех, кто уже имеет представление о том, как настроить свой магазин и понимает «Thunk», но нуждается в помощи в выполнении операций C.R.U.D.

Прежде чем мы перейдем к C.R.U.D с редуксом, давайте проясним некоторые важные словарные термины, определенные в документации.

  • Состояние — представляет все состояние приложения Redux, которое часто является глубоко вложенным объектом.
  • Действие. Действие — это простой объект, представляющий намерение изменить состояние. Действия — единственный способ получить данные в хранилище.
  • Reducer. reducer (также называемая редукционной функцией) — это функция, которая принимает накопление и значение и возвращает новое накопление. Они используются для сокращения набора значений до одного значения.
  • Отправка. функция отправки (или просто функция отправки) — это функция, которая принимает действие или асинхронное действие; затем он может отправлять или не отправлять одно или несколько действий в хранилище.
  • Создатель действий. Создатель действий — это просто функция, которая создает действие. Не путайте эти два термина — опять же, действие — это полезная информация, а создатель действия — это фабрика, которая создает действие.
  • Магазин. Хранилище — это объект, содержащий дерево состояний приложения. В приложении Redux должно быть только одно хранилище, так как композиция происходит на уровне редуктора.
  • Создатель магазина. Создатель магазина — это функция, которая создает магазин Redux. Как и в случае с функцией диспетчеризации, мы должны отличать создателя базового хранилища, createStore(reducer, preloadedState), экспортированного из пакета Redux, от создателей хранилища, которые возвращаются из усилителей хранилища.

Создавать

В этом примере я покажу, как отправить запрос POST в API с данными формы.

Для начала напишите действие

Наша функция Thunk принимает в качестве аргумента полезную нагрузку, которая представляет собой просто способ сказать данные, в нашем случае это будет локальное состояние нашего компонента формы. Давайте сосредоточимся на строке 12, в частности, на dispatch(addData(data.application)). dispatch исходит из параметра в строке 2 после возврата, но, что более важно, отправка исходит из магазина. Он говорит «отправить это действие редюсеру». Строки 16–18 — это создатель действия, у которого есть еще один параметр полезной нагрузки. Полезная нагрузка для создателя действия поступает из возвращенных данных JSON, тогда как функция thunk получает данные полезной нагрузки из формы.

Далее пишем редюсер

Как только действие отправлено, следующим шагом является редюсер. Для начала инициализируйте свое состояние. В этом примере состояние было инициализировано ключом data и значением пустого массива. Функция formDataReducer имеет два параметра: state,, который был установлен равным нашему объекту initialState, и действие, которое исходит от отправки хранилища. В нашем случае хранилище отправит создателя действия addData с двумя ключами: type и payload. Редуктор написан как оператор switch, который ищет значение ключа type и возвращает новые значения для добавления к состоянию приложения. Ключ addData type вызовет истину в строке 8 и вернет значение в строке 9. … — это оператор спреда, о котором можно узнать больше здесь. Строка 9 возвращает копию состояния внутри объекта с ключом данных, как и переменная initialState. Значение данных немного сложно, ...state.data — это копия текущего значения данных. именно эта строка кода позволяет нам продолжать добавлять полезные данные в массив, не перезаписывая его.

Собираем все вместе

Важные фрагменты кода находятся в строках 2, 3, 14 и 42. Строки 2 и 3 импортируют функцию подключения из библиотеки redux, которая подключает хранилище к нашему компоненту, и нашу функцию thunk. в строке 42 функция подключения принимает два аргумента. Первый аргумент — это состояние, которое вы хотите сопоставить с реквизитами, а второй — отправка, которую вы хотите сопоставить с реквизитами. Нам не нужно состояние из хранилища, поэтому мы передаем null в качестве первого аргумента. Второй аргумент фактически принимает объект. Мы говорим addFormdata:addFormData со значением, полученным из нашего импорта, но, как упоминалось ранее, если ключ и значение имеют одно и то же имя, вам нужно написать его только один раз. Наконец, строка 14 запустит процесс отправки и отправит действие редюсеру.