使用 List 更改 ImmutableJS 嵌套对象并返回整个状态（Redux）答案

【问题标题】：Changing ImmutableJS nested object with List and return whole state (Redux)使用 List 更改 ImmutableJS 嵌套对象并返回整个状态（Redux）
【发布时间】：2017-09-29 09:40:06
【问题描述】：

我的状态是一个嵌套的不可变的东西：

const state = Map({ counter: 0, 
                    people: List([
                        Map({name: "John", age: 12, etc...}),
                        Map({name: "Jim", age: 13, etc...}),
                        Map({name: "Jack", age: 21, etc...})
                     ])
                  });

所以我有一个地图，其中包含一个计数器和地图列表。我在这里简化了一些事情，但是说我想在我的 reducer 中更改 John 的一些属性。

现在我正在做这样的事情：

    var newState = state
                .get('people') //get the list
                .get(action.payload.pos) //pos is an integer, & describes the position of the object in the List
                .set('name', action.payload.name)
                .set('age', action.payload.age);

我的问题是我不知道如何在 John 中设置属性并取回整个状态，所以我可以在减速器中返回它。现在我得到的只是我正在改变的部分。

第二个问题是写下所有这些的方法很长。我知道嵌套结构有语法，但我这里有一个List，这会破坏这个，所以我有点卡住了。

【问题讨论】：

抱歉，没有看到您已经有了索引，但我认为我的示例中的技术应该仍然有效。还是我错过了什么？
不，它似乎有效，我会尝试一下。（这也是我几乎立即删除评论的原因，因为我随后看到您的答案并不依赖于以这种方式找到索引。）
好的 :) 让我知道它是否/如何运作！
你好。只是检查，所以你不会忘记。如果我的回答没有解决您的问题，但您自己找到了解决方案，您可以将您的解决方案作为答案发布并（在 48 小时后）接受您自己的答案（但由于显而易见的原因，您不会得到分数）。这将有助于未来的读者。更多关于自助回复的信息：stackoverflow.com/help/self-answer

标签： javascript redux react-redux immutability immutable.js

【解决方案1】：

您可以使用.findIndex 找到要更新的索引（如果您还没有），然后在.updateIn 调用中使用该索引，与.merge 一起合并旧的和新的价值观。

const state = 
  new Immutable.Map({ 
    counter: 0, 
    people: new Immutable.List([
        new Immutable.Map({name: "John", age: 12, otherVal: 'a'}),
        new Immutable.Map({name: "Jim", age: 13, otherVal: 'b'}),
        new Immutable.Map({name: "Jack", age: 21, otherVal: 'c'})
     ])
  });
  
const newValues = { name: 'Jones', age: 100};

// find index to update
const indexToUpdate = state
  .get('people')
  .findIndex(person => person.get('name') == 'Jim');
// use .updateIn to perform a merge on the person of interest
const newState = 
  state.updateIn(
    ['people', indexToUpdate],
    person => person.merge(newValues)
  );
  
console.log(
  'new state is:\n', 
  JSON.stringify(newState.toJS(), null, 2)
);

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.7.2/immutable.min.js"&gt;&lt;/script&gt;

【讨论】：