За последние 10 дней я впервые изучил React и Redux и создал свое первое приложение с ними вместе.

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

Вне Redux случаи переключения обычно заканчиваются следующим оператором break:

switch (expression) {
  case value1:
    execution statement 1;
    break;
  case value2:
    execution statement 2;
    break;
  default:
    no case matched execution statement;
    break;
}

В Redux наш редуктор будет возвращать новую копию состояния с внесенными нами изменениями. Мы хотим завершить наши случаи переключения, вернув новое состояние. Это будет иметь такой же завершающий эффект, что и операторы break.

Конечно, мы будем использовать константы из нашего файла констант типов действий и использовать Object.assign () для копирования нашего объекта состояния, чтобы изменить его перед возвратом нового состояния:

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

Однако, если вы запустите свой редуктор, написанный таким образом, вы получите синтаксическую ошибку:

SyntaxError: Identifier 'newState' has already been declared

Это связано с тем, что ES6 выдаст синтаксическую ошибку, если вы попытаетесь повторно объявить переменные, объявленные с помощью const или let. Это хорошо, так как вам нужна дополнительная безопасность. В ES5, используя var, вы могли повторно объявлять переменные сколько угодно (или случайно):

var a = 1;
var a = 2;
var a = 3;
// Does not throw an error.

Однако с const и let:

let a = 1;
let a = 2;
// Throws syntax error

const b = 1;
const b = 2;
// Also throws syntax error

Мы не можем повторно объявить переменные, объявленные с помощью const или let, даже если они существуют в разделах, которые не будут выполняться, если это сделает другой.

Как мы можем использовать объявители переменных ES6 в наших редукторах Redux или переключать блоки в целом? Беглый взгляд на Redux docs reducer section дает нам четкий ответ, даже несмотря на то, что они не используют const или let ни в одном из своих примеров:

Заключите блоки в фигурные скобки.

Это становится совершенно очевидно, как только вы это видите. Const и let имеют блочную область видимости и существуют только между {}, в которых они объявлены. Если мы будем следовать этому шаблону, мы получим редуктор, который выглядит так:

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

Это может применяться везде, где вы используете блоки переключателей с ES6.

Мне никогда не нравились блоки переключателей, потому что они, казалось, не соответствовали внешнему виду с остальной частью моего кода. Ощущение перерыва нарушило стиль. Использование фигурных скобок и возврата в конце блоков переключателей, особенно в редукторах Redux, заставляет меня чувствовать, что я хочу использовать этот мощный аспект языка, которого я раньше не использовал.

Заключение:

  • Если вы используете const или let в блоке переключателя, обязательно используйте фигурные скобки, чтобы избежать синтаксических ошибок.