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

时间:2015-12-18 02:31:35

标签: javascript reactjs flux redux

我有一个包含数组的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执行此操作的最佳实践方法。

1 个答案:

答案 0 :(得分:1)

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