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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

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

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

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

1
2
3
4
5
6
7
8

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

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

1
2
3
4
5

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

Оператор расширения позволяет нам упрощать вызов map:

1
2
3
4

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

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

1
2
3
4

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

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

Комментарии