Мне не нравятся заголовки, в которых указывается какое-либо суждение о способностях людей, но то, что следует ниже, представляет собой очень базовую схему 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 Уэса Боса.