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

问题描述

我已经建立了自己的状态

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

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

我使用的是Immutable JS，尽管还没有结婚.我想知道如何确定对象的ID并在化简器中更新其活动状态?我也愿意就如何更好地改善自己的状态提供反馈意见

解决方案

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

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

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

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

第二种方法更加简洁，因此，如果您使用普通的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屋！