使用es6的扩展操作符在第2阶段加载程序中使用react redux应用程序

Question

我正在使用ES6扩展操作符在我的react redux应用程序中，就像这样。

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

因此，这里您真正需要做的是将现有的项和从有效负载返回的项连接起来。

假设是这样的，那么您需要从旧的items数组和new元素数组中创建一个新数组。您还希望避免改变现有状态。

从减速机返回一个全新的状态。通过克隆现有状态并添加新项数组来做到这一点：

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;

有更清晰的方法可以使用扩展语法或库(例如不可变)来实现这一点，但是这个示例将显式地实现我们需要做的事情。