Сопоставление шаблонов действий: пример использования switch(true)

switch(true) в значительной степени является Psyduck Javascript; когда вы впервые сталкиваетесь с ним в дикой природе, он сразу же сбивает вас с толку; и это суперэффективно!

Но почему!?

вероятно, вы подумали, когда поняли, что он делает, решив вместо этого использовать предложения if-else. Я согласен, что обычно это лучшая идея, но я хотел бы представить один случай, который определенно лучше подходит для switch(true):

Сопоставление типов действий с шаблонами в редюсерах Redux!

Таким образом, этот метод можно использовать для обновления состояния в соответствии с шаблонами типа действия, а не для сопоставления строки типа действия с установленными значениями!

Но почему!?

это, наверное, то, что вы думаете прямо сейчас! Не волнуйтесь, я приготовил Полное исцеление, чтобы мы могли избавить вас от путаницы раз и навсегда. Итак, давайте рассмотрим конкретный вариант использования.

HttpReducer

Предположим, мы используем промежуточное ПО Redux (thunk/saga/redux-observables и т. д.) для обработки взаимодействий с API. В этом примере мы предположим, что у нас есть редюсер, который отслеживает запущенные запросы, успешные и неудачные действия, и что все они используют постфиксы :REQUEST, :SUCCESS и :FAILURE соответственно.

Так, например, при извлечении пользовательских данных создатели действий будут генерировать действия с тремя следующими типами данных: FETCH_USER_DATA:REQUEST, FETCH_USER_DATA:SUCCESS и FETCH_USER_DATA:FAILURE. Пока это, вероятно, знакомо большинству активных пользователей Flux.

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

const httpReducer = (state, action) => {
  switch(true) {
  case action.type.includes(':REQUEST'):
    // logic for adding to request list
  case action.type.includes(':SUCCESS'):
    // logic for removing from request list
  case action.type.includes(':FAILURE'):
    // logic for removing from request list
    // and possibly some error handling?
  default:
   return state;
  }
}

Сопоставление типа действия с шаблонами может быть элегантно выполнено с помощью switch(true). Немного лучше, чем куча предложений if-else, не так ли?

Урок усвоен... даже Псайдак может стать незаменимым членом команды!