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

Redux означает «возвращенный» или «возрожденный». Это название кажется подходящим для фреймворка, предназначенного для использования преимуществ стиля потока данных Flux. Вместо того, чтобы создавать программы с иерархической передачей данных от родительских компонентов к дочерним и обратно, Redux поощряет почти круговой поток через свои фреймы. Это основной фактор относительной стабильности Redux.

В выходные, посвященные Дню Благодарения, я делал обзор, изучая старые лаборатории и концепции, с которыми я боролся. Одна лаборатория, которая не давала мне покоя, касалась Array.prototype.reduce(). Это было сокращение Redux.

Уменьшить — это функция, которая позволяет вам свести набор данных к одному фрагменту данных.

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

Проиллюстрировать:

[6, 5, 4, 3, 2, 1].reduce(function(previous, current){
  return previous + current
}, 20)
// 41

Таким образом, Reduce применяет функцию к массиву, к которому она вызывается, начиная с начального предоставленного значения.

Вернемся к знакомой схеме. Одна из основных частей фреймворка Redux называется reducer (мой разум не был достаточно отдохнувшим, чтобы принять этот факт за важную подсказку). Редьюсер — это чистая функция, которая принимает два аргумента: состояние приложения и действие. Он применяет действие к состоянию и возвращает новую версию состояния, отражающую эти изменения.

Проиллюстрировать:

function userReducer(state = [], action){
  let state;
  switch (action.type) {
    case 'ADD_USER':
      return [...state, action.payload]
    default:
      return state
  }
}

Этот редуктор принимает текущее состояние, идентифицирует действие на основе его типа и применяет действие к состоянию. Он возвращает новое состояние.

Ого они одинаковые! Не видите? Они оба принимают функцию/действие и начальное значение и возвращают новое значение. Я немного покопался, чтобы выяснить, что это полностью задумано. К сожалению, я не умею различать шаблоны Beautiful Mind.

Согласно документации Redux:

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

Редюсеры не уникальны для Redux — они являются фундаментальной концепцией функционального программирования. Даже большинство нефункциональных языков, таких как JavaScript, имеют встроенный API для сокращения. В JavaScript это Array.prototype.reduce().

Хотя я, возможно, не был гениальным, я, по крайней мере, получил подтверждение того, что начинаю понимать ландшафт этого языка, называемого JavaScript.