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

Я не специалист в области анатомии человека и Redux, но когда я изучаю новый шаблон программирования, я считаю полезным приравнять его к сценариям реального мира.

Далее следует мой пример Redux-in-the-world, чтобы разобраться во всей терминологии.

Давайте обрисуем основные термины Redux: редукторы, действия, состояние и типы в нашем примере из реального мира:

  • Состояние / Магазин: МОЗГ. Здесь все хранится.
  • Редукторы: ствол мозга. Именно сюда будут поступать типы и действия, и информация будет отсортирована, прежде чем она будет сохранена в мозгу.
  • Действия: Нервная система. Действия принимают информацию и сообщают редукторам, используя различные типы, информацию, которую они получили.
  • Типы: информация, перемещающаяся по нервной системе. Типы обеспечивают бесперебойную связь между действиями и редукторами и гарантируют, что информация будет сохранена в правильном бите состояния.
  • Компонент React: Ваше лицо! Это публичная сторона вещей. Он не обрабатывает информацию, но содержит нервы (действия), которые действительно реагируют на вещи.

Имея в виду вышеизложенное, скажем (для удовольствия), кто-то дает вам пощечину.

Компонент ‹Face /› будет иметь действие ‘faceSlapped ()’ с переданным ему аргументом ‘hard’.

Действие faceSlapped будет определяться следующим образом:

function faceSlapped(strength){
  return {
     type: 'FACE_SLAPPED',
     payload: strength
  }
}

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

В этом случае мы скажем нашему мозгу: «Эй, меня очень сильно ударили по лицу».

Вот и все. Мы не говорим компоненту, как реагировать на эту информацию, мы просто передаем информацию.

Редуктор, ствол мозга, прислушивается ко всем действиям / типам всех наших нервных окончаний (действий).

Итак, когда компонент ‹Face /› отправляет (термин сокращения!) Действие «faceSlapped ()» с типом «FACE_SLAPPED», наш редуктор получает действие и проверяет его на тип.

Редуктор (обычно записываемый как длинный оператор переключения) затем обновляет часть состояния, касающуюся slapStatus и slapStrength, на основе информации в полезной нагрузке действия.

В коде это выглядит примерно так:

function reducer(initialState, action){
  switch (action.type) {
   case 'FACE_SLAPPED':
     return {
      slapStatus: true,
      slapStrength: action.payload, 
     }
   }
}

Компонент ‹Face /› получит этот новый кусок состояния в качестве свойств и обновит его соответствующим образом, возможно, путем рендеринга своего «плачущего» экземпляра.

Простой?

Если вы хотите действительно изучить Redux, с реальными примерами программирования и без разговоров об анатомии, я настоятельно рекомендую Курс Redux Стивена Гридера, а затем Курс Redux Уэса Боса.