在带有 stage-2 加载器的 react-redux 应用程序中使用来自 es6 的扩展运算符

Question

我像这样在我的 react-redux 应用程序中使用 ES6 传播运算符

var defaultState = {val:1, items:[]};
export default function(state=defaultState, action){
  switch(action.type){
    case 'ADD_BOOK':
    state.val = 0;
    return {
      ...state,
      items:action.payload.data.result
    };

问题是每次我从 action.payload.data.result 中获取分配给项目的新数据。我想连接以前状态的数据。有人可以帮忙吗。

Answer 1

这应该有效。

return {
  ...state,
  items: [
    ...state.items,
    ...aciton.payload.data.result
  ]
}

Answer 2

所以您在这里真正需要做的是连接现有项目和从您的有效负载返回的项目。

假设是这种情况，那么您需要从旧项目数组和新项目创建一个新数组。 You also want to avoid mutating the existing state.

Return 来自减速器的全新状态。通过克隆现有状态并添加新的项目数组来做到这一点：

case 'ADD_BOOK':
    var newState = Object.assign({}, state, {val:0}); // clones the existing state and adds our new val
    newState.items = newState.Items.concat(action.payload.data.result);
    return newState;

有更简洁的方法可以使用扩展语法或库（例如 immutable）来执行此操作，但此示例将明确实现我们需要执行的操作。

在带有 stage-2 加载器的 react-redux 应用程序中使用来自 es6 的扩展运算符

Using spread operator from es6 in react-redux app with stage-2 loader

ecmascript-6

reactjs

redux

react-redux