При первом изучении react-redux может быть сложно и запутать отслеживание потока данных между различными файлами, поскольку вы будете прыгать между различными частями вашего кода. Этот пост призван служить в качестве общего руководства по потоку данных, начиная с момента действия.

Компонент → Преобразователи / Функции создания действий → API / Бэкэнд / База данных → Редуктор → Компонент

Компонент Часть 1

Внутри компонентов чаще всего происходят вещи, которые приводят к обновлению состояния вашего магазина и / или базы данных.

  • Примеры: нажатие кнопки, которая добавит / удалит элемент в / из списка, ввод информации, которая создаст новый элемент списка.

Две волшебные функции: 1. Доступ к состоянию хранилища и 2. Функции отправки из редуктора:

  1. Сопоставить состояние с реквизитом - позволяет компоненту получать доступ ко всему в состоянии вашего магазина, помещая это в реквизиты.
  • Принимает состояние как параметр, и вы можете получить ЛЮБОЕ из состояния хранилища и назначить его переменной, чтобы затем к ней можно было получить доступ через реквизиты в любом месте вашего компонента (пример кода). Вы также можете изменить информацию, которую вы собираете из состояния (например: фильтрация массива, доступ к определенному ключу из объекта)

2. Сопоставить отправку с реквизитом - позволяет отправлять любой элемент действия / функцию преобразователя из любого редуктора.

  • Принимает отправку в качестве параметра. После импорта функции, которую вы хотите отправить, вы можете установить переменную как функцию, которая возвращает импортированную функцию, заключенную в отправку (пример кода). Затем вы можете получить доступ к этой переменной через реквизиты в любом месте вашего компонента.
  • Обязательно отправьте импортированную функцию с любой информацией, которую функция в редукторе ожидает получить!

Обе эти функции будут выполняться при первоначальном рендеринге компонента и помещать эти переменные в свойства. Они также будут выполняться каждый раз при повторном рендеринге компонента (повторный рендеринг будет происходить при изменении состояния хранилища, поскольку компонент подключен через соединение response-redux)

Куда отправить? Вы можете выполнить отправку непосредственно внутри возврата вашего компонента или создать функцию вне возврата (например, handleClick), которая вызывает функцию диспетчеризации, которую вы помещаете в свое состояние.

Как только функция создателя преобразователя / действия, которую вы импортировали, будет отправлена, она попадет в эту функцию внутри редуктора и продолжит работу там ...

Компонент → Преобразователи / функции создания действий → API / Бэкэнд / База данных → Редуктор → Компонент

Функции Thunks / Action Creator и файл-редуктор

Их можно найти в вашем файле редуктора; Редуктор - это место, где состояние вашего магазина создается / обновляется / осуществляется доступ.

Есть 3 основные части: элементы действий, функции / преобразователи действий для создания действий и сам редуктор.

  1. Элементы действий - это переменные, которым присваивается строка, определяющая ТИП действия, которое вы хотите выполнить.
  • Каждый случай функции / редуктора имеет связанный с ним тип, поэтому редуктор знает, каким образом он должен изменять состояние.
  • В операторе reducer switch вашими действиями должны быть разные случаи.

2. Функции / преобразователи действий для создания действий - если вы отправляете преобразователь, перейдите в раздел преобразователя. Если вы отправляете функцию создателя действия, прочтите маркер функции создания действия (пропустить переход и слайд бэкэнд)

Функции создания действий:

  • Они просто возвращают объект с двумя свойствами:
  • 1. тип, назначенный элементу действия, который он должен выполнить в редукторе (поэтому, когда оператор switch проверяет action.type, он знает, куда идти в редукторе)
  • 2. Переменная, к которой вы хотите получить доступ в редукторе. Это может быть отправлено либо из диспетчеризации в компоненте, либо из преобразователя, вызывающего эту функцию (доступ к которому осуществляется в редукторе как действие. [Имя_переменной]). В любом случае он принимается как аргумент.
  • Это заставит редуктор выполнить связанный тип

Преобразователи:

  • Это функции, которые делают запросы к API / базе данных, получают данные, а затем отправляют их в связанную функцию создателя действия.
  • Технически, когда функция отправляется из компонента (или где-либо еще в вашем коде), она попадает в промежуточное программное обеспечение преобразователя, которое затем обращается к этим функциям преобразования в файле редуктора.
  • По сути, они часто отправляются из компонентов для выполнения запросов к базе данных, а затем сами отправляют функцию создания действия с необходимой информацией, которая затем запускает редуктор.
  • Используя все, что передается в качестве аргумента, преобразователь сделает соответствующий запрос базы данных к бэкэнду с данными, которые бэкэнд должен получить (если таковые имеются). УБЕДИТЕСЬ, что передаваемые данные содержат всю информацию, необходимую для серверной части.

Компонент → Преобразователи / Функции создания действий → API / Бэкэнд / База данных → Редуктор → Компонент

API / бэкэнд / база данных

Когда ваш преобразователь делает запрос API, он попадает в соответствующий маршрут, чтобы соответствующим образом обновить базу данных.

На маршруте вы будете выполнять асинхронный вызов базы данных для создания / добавления / обновления / уничтожения элементов. Если вы получаете данные от преобразователя, к ним можно получить доступ через req.body.

  • УБЕДИТЕСЬ, что ваши запросы к базе данных отправляются в формате, который будет точно обновлять вашу базу данных по мере необходимости.

Вызов базы данных вернет обещание, и вы можете получить нужные возвращенные данные, деструктурируя переменную с помощью {data} или получив к ней доступ через .data

УБЕДИТЕСЬ, что все, что вы отправляете обратно на преобразователь, является той информацией, которую он ожидает получить для обновления состояния. Если ему требуется больше информации, чем возвращается из вашего обещания, вы можете либо создать объект, который будет возвращаться сюда, либо манипулировать объектом, возвращаемым в преобразователе.

В любом случае убедитесь, что вы res.json () соответствующие данные для получения преобразователя (который должен содержать то, что преобразователь должен передать редуктору для обновления состояния)

Компонент → Преобразователи / Функции создания действий → API / Бэкэнд / База данных → Редуктор → Компонент

Редуктор Часть 2

Thunk (пропускать, если серверный запрос отсутствует / используется только функция создания действия)

  • После того, как вы получите данные, поступающие из бэкэнда, вам необходимо убедиться, что они отформатированы ТОЧНО, как ожидает ваш редуктор, в основном будучи уверенным, что он содержит информацию таким образом, чтобы вы могли изменять состояние по мере необходимости.
  • Затем вы отправите связанной функции создания действия с данными, которые она ожидает получить (см. Редуктор, часть 1 для функции создания действия, затем продолжите здесь)

Как только вы отправите свою функцию создателя действия, она попадет в редуктор («отправка» в основном вызывает редуктор с действием, содержащим тип отправки и информацию)

Редуктор -, где фактически изменяется состояние магазина.

Редуктор принимает состояние и действие в качестве параметров, причем состояние является текущим состоянием, а действие - объектом, возвращаемым функцией создателя действия.

Редуктор должен иметь оператор switch, который проверяет действие. Type

Каждый случай для типов действий должен возвращать объект, содержащий обновленное состояние.

  • Используя действие. [VariableName], теперь вы можете обновить состояние, чтобы оно отражало изменения, внесенные вами в базу данных, которые необходимо отразить во внешнем интерфейсе.
  • ОБЯЗАТЕЛЬНО возвращайте все части объекта состояния, даже если вы их не обновляли. Вы можете легко добавить нетронутые части состояния, используя оператор распространения в начале возвращаемого объекта {… state, variableToChange: action.variableName}
  • Если переменная в элементе действия необходима для изменения существующей части состояния, вы можете выполнять операции перед возвратом возвращаемого объекта состояния (пример: фильтрация через массив для удаления обновленного элемента и последующее добавление обновленного элемента в этот массив)

Компонент → Преобразователи / Функции создания действий → API / Бэкэнд / База данных → Редуктор → Компонент

Компонент Часть 2

Теперь, когда состояние вашего хранилища обновлено, ЛЮБОЙ компонент, подключенный к состоянию хранилища, будет повторно отрисован с новым обновленным состоянием вместе с любыми дочерними компонентами.

Ваше интерфейсное веб-приложение должно отражать эти изменения без необходимости перезагружать страницу.