时间戳

首页 > 解决方案 > 如何在reducer内的immutable-js中删除嵌套状态对象？

javascript - 如何在reducer内的immutable-js中删除嵌套状态对象？

问题描述

我想从中删除一个实体data（它是 List inside object someData）。我fromJS在减速器中使用不可变 js 来保持状态不可变

我尝试使用updateIn, deleteIn, update, removeIn以及在 immutable-js 上可以找到的任何内容。但这对我不起作用。很可能我以错误的方式使用这些功能。

import { fromJS, updateIn } from 'immutable';
import * as type from './constants';

export const initialState = fromJS({
  someData: [],
  loading: true,
});

function someReducer(state = initialState, action) {
  switch (action.type) {
    case type.DELETE_SINGLE_ENTITY:
      updateIn(state, ['someData', 'data'], val =>
        val.filter(x => x.id !== action.id),      
      );
      return state;
    default:
      return state;
  }
}

export default someReducer;

//example someData

/*
{
    date: "",
    data: [
        {
            "id": "1",
            "machine_type": "xyz",
            "created_time": "2019-06-18T10:36:60Z",
            ...
        },
        {
            "id": "22",
            "machine_type": "abc",
            "created_time": "2019-06-20T10:36:60Z",
            ...
        },
        {
            "id": "2",
            "machine_type": "kjhkh",
            "created_time": "2019-06-11T12:36:60Z",
            ...
        }
    ]
}
*/

我想删除与传入的 id 匹配的实体。在删除state.get('someData')上面示例中的输出之前。action.id我键入时的预期输出（何时为 2）state.get应该是：

{
    date: "",
    data: [
        {
            "id": "1",
            "machine_type": "xyz",
            "created_time": "2019-06-18T10:36:60Z",
            ...
        },
        {
            "id": "22",
            "machine_type": "abc",
            "created_time": "2019-06-20T10:36:60Z",
            ...
        }
    ]
}

标签： javascriptreactjsreact-reduximmutable.js

解决方案

最后！知道了！这：

      return updateIn(state, ['someData', 'data'], val =>
        val.filter(x => x.id !== action.id),      
      );

而不是这个：

      updateIn(state, ['someData', 'data'], val =>
        val.filter(x => x.id !== action.id),      
      );
      return state;

以前我认为 updateIn 会更新状态本身，但它不会返回更新的对象。因此，只需返回 updateIn 就可以了。

推荐阅读