javascript-使用Object.assign正确返回嵌套状态

2019-11-19 00:36:00 阅读：459 来源： 互联网

标签：ecmascript-6 reactjs redux javascript

我正在开发一个React / Redux应用程序,并且在大多数情况下,一切都进行得很顺利.

本质上,这是一个内置分类的待办事项应用程序.

当用户在类别中添加待办事项时,我无法正确返回化简版中的全部现有状态.

在我调度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"
}
}

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

当前在我的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,我将得到我想要的对象的确切对象.但是,我正在努力让减速器返回最终对象以反映这一点.

当我尝试如下所示的操作时,我得到了一个包含combinedItems作为对象内部单独键的对象.

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

谁能帮助我获得最终的还原状态,以包含用户添加的所有现有类别/项目？我非常感谢您的帮助.

解决方法:

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

[category, name, priority]

你可以有：

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

我会对您的待办事项进行相同的更改.代替：

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

你可以有：

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

现在,从使项目成为具有类别键的对象还是知道其类别的项目数组来看,这是更好的选择……我认为后者更好,这样,如果您获得单个项目,则无需转到其父项以找出它属于哪个类别.这也将使您的问题更易于管理.

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')

标签：ecmascript-6,reactjs,redux,javascript
来源： https://codeday.me/bug/20191119/2032298.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-使用Object.assign正确返回嵌套状态