【问题标题】：Object.assign an concat - ES6 refactoringObject.assign 一个 concat - ES6 重构
【发布时间】：2018-08-25 21:17:43
【问题描述】：

如何使用 ES6 重构这个 redux reducer 代码？ Concat 我可以用... 代替，对吗？但是 Object.assign 呢？

import { FETCH_REQUEST, FETCH_SUCCESS, FETCH_FAILURE } from '../actions';

const initialState = {
  isFetching: false,
  beersArray: [],
  errorMessage: '',
  skip: 0,
  limit: 0,
  hasMore: true,
};

export default function(state = initialState, action) {
  switch (action.type) {
    case FETCH_REQUEST:
      return Object.assign({}, state, {
        isFetching: true,
        skip: action.skip,
        limit: action.limit,
        hasMore: true,
      });
    case FETCH_SUCCESS:
      return Object.assign({}, state, {
        isFetching: false,
        beersArray: state.beersArray.concat(action.beers),
        hasMore: action.hasMore,
      });
    case FETCH_FAILURE:
      return Object.assign({}, state, {
        isFetching: false,
        errorMessage: action.errorMessage,
        hasMore: false,
      });
    default:
      return state;
  }
}

【问题讨论】：

标签： javascript reactjs ecmascript-6 redux react-redux

【解决方案1】：

您可以将Object.assign 替换为。请注意，...state（传播属性）是提案，因此您的环境需要支持它们。

return { ...state, isFetching: true, skip: action.skip, limit: action.limit, hasMore: true };

concat呢，可以写

{ beersArray: [...state.beersArray, ...action.beers] }

这只会破坏 state.beersArray 和 action.beers 中的项目，将它们放入新数组并分配给 beersArray。

【讨论】：

【解决方案2】：

您也可以在key-value 对象和arrays 上使用Spread 运算符。

export default function(state = initialState, action) {
  switch (action.type) {
    case FETCH_REQUEST:
      return {...state, { isFetching: true, skip: action.skip, limit: action.limit, hasMore: true}};
    case FETCH_SUCCESS:
      return {...state, { isFetching: false, beersArray: [...state.beersArray, ...action.beers], hasMore: action.hasMore });
    case FETCH_FAILURE:
      return { ...state, { isFetching: false, errorMessage: action.errorMessage, hasMore: false });
    default:
      return state;
  }
}

过渡

state.beersArray.concat(action.beers) 到 [...state.beersArray, ...action.beers]

Object.assign({}, state, {other props}} 到 { ...state, ...state, ...{other props} }

`Spread syntax (...)`

Spread syntax 允许在需要零个或多个参数（用于函数调用）或元素（用于数组字面量）的地方扩展诸如数组表达式或字符串之类的可迭代对象，或者在需要扩展对象表达式的地方其中需要零个或多个键值对（用于对象字面量）。

【讨论】：