使用Object.assign

时间:2016-03-06 19:53:24

标签: javascript reactjs ecmascript-6 redux

我正在研究React / Redux应用程序,但大多数情况下,一切都运行顺畅。

基本上,它是一个内置分类的待办事项应用程序。

当用户在类别中添加待办事项时,我无法在reducer中正确返回完整的现有状态。

发送ADD_ITEM操作之前的redux状态如下所示:

{
items: {
    "HOME": [["Do laundry", "High Priority"],["Feed kids", "Low priority"] ],
    "WORK": [["Get promotion", "High priority"],["Finish project", "Medium priority"] ],
    "BOTH": [["Eat better", "Medium priority"],["Go for a run", "High priority"] ],

},
settings: {
    Test: "test"
}
}

用户导航到一个类别(预先制作,尚未实现创建它们),并可以创建一个具有名称和优先级的新待事项目。这将调度一个返回数组的操作,如[category,name,priority]。

目前在我的reducer中,我已经成功添加了该项目,但它正在清空/覆盖所有现有类别。

我的减速机看起来像这样:

case types.ADD_ITEM:
let cat = action.payload[0];
let name = action.payload[1];
let priority = action.payload[2];
return Object.assign({}, state, { items: { [cat]:   [...state.items[cat], [name, priority]]}});

我尝试首先使用所有组合项目创建一个新对象:

let combinedItems = Object.assign({}, state.items, { [cat]: [...state.items[cat], action.payload] });

如果我在console.log上面的上面的combinedItems,我得到了我想要项目的确切对象。但是,我正在努力让reducer返回的最终对象反映出来。

当我尝试下面的内容时,我得到一个对象,其中包含combinedItems作为项目中的单独键。

        return Object.assign({}, state, { items: { combinedItems, [cat]: [...state.items[cat], [name, priority]]}});

任何人都可以帮助我让我的最终redux状态包含所有现有的类别/项目+用户添加的一个吗?我非常感谢你的帮助。

1 个答案:

答案 0 :(得分:3)

我认为你应该在有数组的地方使用对象。在您的操作有效负载中,而不是:

[category, name, priority]

你可以:

{category, name, priority}
action.payload.category

我会对您的待办事项进行相同的更改。而不是:

[["Eat better", "Medium priority"], ... ]

你可以:

[{ name: "Eat better", priority: "Medium" }, ... ]

现在就使items一个带有类别键的对象或一组知道其类别的项目更好......我认为后者更好,如果你这样做得到一个项目,你不需要去它的父母找出它属于哪个类别。这也会使你的问题更容易管理。

items: [
  { 
    name: "Eat better", 
    priority: "Medium", 
    category: "Both" 
  }, ... 
]

将这一切放在一起解决您的问题:

case types.ADD_ITEM:
  let newItem = {
    name: action.payload.name,
    priority: action.payload.priority,
    category: action.payload.category
  }
  return Object.assign({}, state, { items: [ ...state.items, newItem ] })

您之前使用类别获得的任何好处,因为使用此结构重现密钥是微不足道的。

获取HOME类别中的所有项目:

this.props.items.filter(item => item.category === 'HOME')