Использование оператора расширения объектов

Поскольку одним из основных принципов Redux является то, что состояние никогда не должно изменяться, вы часто будете использовать Object.assign(), чтобы создавать копии объектов с новыми или обновлёнными значениями. Например, в todoApp ниже Object.assign() используется для возвращения нового state объекта с обновлённым visibilityFilter свойством:

function todoApp(state = initialState, action) {
  switch (action.type) {
    case SET_VISIBILITY_FILTER:
      return Object.assign({}, state, {
        visibilityFilter: action.filter
      })
    default:
      return state
  }
}

Хотя это эффективно, использование Object.assign() может быстро сделать простые редукторы трудночитаемыми из-за довольно громоздкого синтаксиса.

Альтернативный подход заключается в использовании синтаксиса расширения объектов, предложенного для следующих версий JavaScript, который позволяет использовать оператор расширения (...) для копирования перечисляемых свойств из одного объекта в другой более лаконичным способом. Оператор расширения объектов концептуально похож на оператор расширения массивов ES6 оператора расширения массивов. Мы можем упростить пример todoApp выше, используя синтаксис расширения объектов:

function todoApp(state = initialState, action) {
  switch (action.type) {
    case SET_VISIBILITY_FILTER:
      return { ...state, visibilityFilter: action.filter }
    default:
      return state
  }
}

Преимущество использования синтаксиса расширения объектов становится более очевидным при составлении сложных объектов. Ниже getAddedIds отображает массив id значений в массив объектов со значениями, возвращаемыми из getProduct и getQuantity.

return getAddedIds(state.cart).map(id =>
  Object.assign({}, getProduct(state.products, id), {
    quantity: getQuantity(state.cart, id)
  })
)

Оператор расширения объектов позволяет упростить вышеупомянутый map вызов до:

return getAddedIds(state.cart).map(id => ({
  ...getProduct(state.products, id),
  quantity: getQuantity(state.cart, id)
}))

Поскольку синтаксис расширения объектов всё ещё является предложением на стадии 3 предложения ECMAScript, вам потребуется использовать транспайлер, такой как Babel, чтобы использовать его в производстве. Вы можете использовать ваш существующий es2015 набор пресетов, установить babel-plugin-transform-object-rest-spread и добавить его индивидуально в plugins массив в вашем .babelrc.

{
  "presets": ["es2015"],
  "plugins": ["transform-object-rest-spread"]
}

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