如何更新减速器中嵌套对象的值? [英] How to update a value of a nested object in a reducer?

问题描述

我已经建立了这样的状态

const 列表 = {类别:{专业的: {活动:假，名称: [{编号:1，名称:高尔夫"，活动:假},{编号:2，名称:终极飞盘"，活动:假}]}}

在我的操作中，我添加了一个 ID 选项，因此我想在用户单击该选项时更改活动状态

我使用的是 Immutable JS，虽然没有与之结婚.我想知道如何定位对象的 id 并在减速器中更新其活动状态?我也愿意接受关于如何更好地改善我的状态的反馈

解决方案

这是很常见的事情，实际上也很令人生畏.据我所知，在纯 JS 中没有真正好的和被广泛采用的解决方案.最初，使用了 Object.assign 方法:

return Object.assign({}, state, {类别:Object.assign({}, state.categories, {专业:Object.assign({}, state.Professional, {活动:真实})})});

这太简单和繁琐了，我承认，但我不得不说，我们已经用这种方法构建了几个大型应用程序，除了字符数外，它还不错.现在，最流行的方法是使用对象传播:

return {...状态，类别:{...状态.类别，专业的: {...state.categories.Professional,活动:真实}}}

第二种方法更简洁，所以如果您使用纯JS，那么它似乎是一个不错的选择.在 Immutable.js 中我不得不承认它更容易，你只需做下一个

return state.updateIn(['categories', 'Professional'], x => x.set('active', true));

但它有其自身的缺点和警告，因此在承诺之前最好认真考虑一下.

关于改善状态的最后一个问题 - 通常最好不要进行如此深的嵌套(将您的关注点分开，字段通常不相互依赖 - 例如 active 状态可以是分离到另一个对象)，但由于不了解您的领域，因此很难说.此外，规范化您的数据也被认为是正常的事情.>

I have built my state like so

const list = {
  categories: {
   Professional: {
    active: false,
    names: [
      {
        id: 1,
        name: "Golf",
        active: false
      },
      {
        id: 2,
        name: "Ultimate Frisbee",
        active: false
      }
  ] 
}}

In my action I have added an ID option so I would like to change the active status when the user clicks the option to do so

I am using Immutable JS though not married to it. I am wondering how I could target the id of the object and update its active status in a reducer? I am also open to feedback on how to better improve my state

解决方案

This is very common thing, and, actually, quite daunting. As far as I know, there is no really good and well-adopted solution in plain JS. Initially, Object.assign approach was used:

return Object.assign({}, state, {
  categories: Object.assign({}, state.categories, {
    Professional: Object.assign({}, state.Professional, {
      active: true
    })
  })
});

This is too straightforward and cumbersome, I admit it, but I have to say that we've built few big applications with this approaches, and except for number of characters it is not bad. Nowadays, the most popular approach is using Object spread:

return {
  ...state,
  categories: {
    ...state.categories,
    Professional: {
      ...state.categories.Professional,
      active: true
    }
  }
}

The second approach is much more cleaner, so if you use plain JS, then it seems as a good choice. In Immutable.js I have to admit it is easier, you just do the next

return state.updateIn(['categories', 'Professional'], x => x.set('active', true));

But it has it's own drawbacks and caveats, so it is better to think about it seriously before committing to it.

And your last question regarding improving the state – usually it is better not to have such deep nesting (separate your concerns, very often fields don't depend on each other – like active status can be separated to another object), but it is hard to say because of no knowledge of your domain. Also, it is considered as normal thing to normalize your data.

这篇关于如何更新减速器中嵌套对象的值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！