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

How to enforce data constraints in redux

本文关键字：强制执行 数据 约束 redux      更新时间：2023-09-26

我有一个redux/react应用程序，它包含一个数组。此数组的每个元素都有一个数字属性，这些属性的总和不能超过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，它添加了一个新的数组项，并编辑了一个现有项的编号（这使用了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;
}

我应该如何以及在我的应用程序（动作创建者、减少器、选择器或React组件）中的什么时候实现这个"最大3"规则？理论上，我可以拒绝任何会将计数增加到3以上的操作，但我不知道用redux实现这一点的最佳实践方法。

我认为这在减速器中效果最好。对于这些操作中的每一个，如果新的项目集有效，则返回该新集，否则返回当前项目，并可能同时设置一个错误。

相关文章：