javascript - 如何在 redux 中强制执行数据约束

Question

我有一个包含数组的 redux/react 应用程序。该数组的每个元素都有一个 number 属性，并且它们的总和不能超过 3。因此，以下任何选项都可以:

arrayState: [
   {id: "a", number: 3}
]

arrayState: [
   {id: "a", number: 1},
   {id: "b", number: 2}
]

arrayState: [
   {id: "a", number: 1},
   {id: "b", number: 1}
   {id: "c", number: 1}
]

然后，我有一个 reducer ，它添加一个新的数组项，以及一个编辑现有项的编号的 reducer (这使用 React Update Addon 语法，希望这是不言自明的)

function items(items = INITIAL_STATE, action) {
    switch (action.type) {
        case actionTypes.ADD_ITEM
            return update(items, {$push: [INITIAL_STATE[0]]});
            break;
        case actionTypes.SET_ITEM_NUMBER:
            return update(items, {[action.index]: {number: {$set: action.number}}});
            break;
    }
    return items;
}

我应该如何以及在我的应用程序( Action 创建器、 reducer 、选择器或 React 组件)中的什么时候实现这个“最多 3 个”规则？理论上，我可以拒绝任何将计数增加到 3 以上的操作，但我不知道使用 redux 执行此操作的最佳实践方法。

Answer 1

我认为这在 reducer 中效果最好。对于每个操作，如果新的项目集有效，则返回该新的项目集，否则返回当前项目，并可能随之设置错误。