Что делает этот создатель действия?

Question

Я читал эту статью о создании приложений реагирования / редукции, и меня немного смутил следующий раздел, особенно часть, которую я обвел красным.Что именно здесь происходит?Я не очень знаком с используемым синтаксисом, двойное «=>» я не видел раньше.Если вам удастся объяснить этот блок кода, мы будем очень признательны!

Спасибо

Answer 1

"двойной" => "я не видел раньше".

Это называется каррингом - это метод перевода оценки функции, которая принимает несколько аргументов, в этом конкретном примере тип, (полезная нагрузка, мета) .Здесь функция принимает первый аргумент ( type ) и возвращает функцию, которая принимает вторые аргументы ( payload, meta ) и т. Д.

пример: constсумма = х => у => х + у;

сумма (2) (1);// возвращает 3

sum (2);// возвращает функцию y => 2 + y

Каррирование - это процесс получения функции с несколькими аргументами и превращения ее в последовательность функций, каждая из которых имеет только один аргумент - причудливое имя Partial Application

https://en.wikipedia.org/wiki/Partial_application

Answer 2

Сначала вы вызываете createAction и передаете тип (SET_USER_ID), затем вы вызываете setUserId и передаете полезную нагрузку (в данном случае id).«Мета» является необязательным аргументом.Сначала трудно обернуть вокруг него голову.Вы также можете написать это так

const newOPfunction = (type) => {
const newFunc = (id) => {
   return {type, id}
}
return newFunc;
}

, но это не выглядит так красиво

Answer 3

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

Функция createAction, как следует из ее названия, создает действия, поэтому вместо необходимости переписывать один и тот же код снова и снова вы можете вызывать его, передавая имя действия, которое вы хотите создать.В этом примере создаваемое действие называется SET_USER_ID

Функция стрелки => - это новый синтаксис, введенный с последним javascript, который известен как ES6. Вы можете прочитать об этом здесь .Функции стрелок позволяют вам определять функции, используя более короткий синтаксис, и они также решают проблемы с областями видимости.

Последняя строка будет использоваться в вашем компоненте реагирования для вызова действия.то есть

<Button onClick={ () => dispatch(setUserId('abcd123')) } />

Мне потребовалось некоторое время, чтобы разобраться с редуксом, если вы не смотрели учебники Дана Абрамова , тогда я настоятельно рекомендую их.Он создатель излишков.Также начните создавать свое собственное приложение для редуксов, это лучший способ учиться.