47

使用 redux 在商店中更新嵌套数据数组的最佳/正确方法是什么？

我的商店是这样的：

{
    items:{
        1: {
            id: 1,
            key: "value",
            links: [
                {
                    id: 10001
                    data: "some more stuff"
                },
                ...
            ]
        },
        ...
    }
}

我有一对更新完整items对象的异步操作，但我还有另一对要更新特定links数组的操作。

我的减速器目前看起来像这样，但我不确定这是否是正确的方法：

  switch (action.type) {
    case RESOURCE_TYPE_LINK_ADD_SUCCESS:
      // TODO: check whether the following is acceptable or should we create a new one?
      state.items[action.resourceTypeId].isSourceOf.push(action.resourceTypeLink);
      return Object.assign({}, state, {
        items: state.items,
      });
  }
4

2 回答 2

58

Jonny 的回答是正确的（永远不要改变给你的状态！）但我想再补充一点。如果您的所有对象都有 ID，则保持状态形状嵌套通常不是一个好主意。

这个：

{
  items: {
    1: {
      id: 1,
      links: [{
        id: 10001
      }]
    }
  }
}

是一个很难更新的形状。

它不必是这样的！您可以像这样存储它：

{
  items: {
    1: {
      id: 1,
      links: [10001]
    }
  },
  links: {
    10001: {
      id: 10001
    }
  }
}

这更容易更新，因为任何实体都只有一个规范副本。如果您需要让用户“编辑链接”，那么只有一个地方需要更新——而且它完全独立items于links.

要将您的 API 响应变成这样的形状，您可以使用normalizr。一旦服务器操作中的实体被规范化，您可以编写一个简单的减速器将它们合并到当前状态：

import merge from 'lodash/object/merge';

function entities(state = { items: {}, links: {} }, action) {
  if (action.response && action.response.entities) {
    return merge({}, state, action.response.entities);
  }

  return state;
}

real-world有关这种方法的演示，请参阅 Redux示例。

于 2015-10-03T10:54:48.987 回答
50

React 的update()不变性助手是一种方便的方法，可以创建普通旧 JavaScript 对象的更新版本，而无需对其进行变异。

你给它一个要更新的源对象和一个描述需要更新的部分的路径和需要进行的更改的对象。

例如，如果一个操作具有id和link属性，并且您想将 推link送到以 为键的项目中的链接数组id：

var update = require('react/lib/update')

// ...

return update(state, {
  items: {
    [action.id]: {
      links: {$push: action.link}
    }
  }
})

（示例使用 ES6 计算属性名称action.id）

于 2015-08-21T10:22:52.817 回答