繁体   English   中英

Redux Reducer:通过键不变地更新数组中的对象

[英]Redux Reducer: Update object in array by key immutably

问题:通过以下方式用键= 1更新devData数组中的对象:->更新数据dateTime

//Redux state:
{
    info: {
        success: true,
        devData: [
            {
                key: 1,
                data: {            <- update this
                    power: 48 ,
                    unit: "kWh"
                },
                dateTime: "2019-08-24T18:21:21.000Z"  <- update this
            },
            {
                key: 2,
                data: {
                    power: 48,
                    unit: "kWh"
                },
                dateTime: "2019-08-24T18:21:01.000Z"
            }
        ]
    }
}

我在reducer中的更新方法:

switch (action.type) {
    case 'update':
        return {
            ...state,
            info: {
                ...state.info,
                devData: state.info.devData.map(currentValue => {
                    if (currentValue.key === 1) {
                        currentValue.data = action.payload.data;
                        currentValue.dateTime = action.payload.dateTime;
                    }
                    return currentValue;
                })
            }
        };
}

我的问题:

  1. 我的更新方法复杂且丑陋,难以理解

  2. 我不确定,如果我真的以不变的方式进行此更新

  3. 我认为我的更新方法计算量很大 ,效率不高

我需要一种更新方法来解决上述问题。

首先安装immer

并只更新您想要的state的一部分。

import produce from "immer"


(...)


switch (action.type) {
  case 'update':
    return produce(state, draft => {
      draft.info.devData[0].data = action.payload.data;
      draft.info.devData[0].dateTime = action.payload.dateTime;
      //This code is working ONLY with devData[0]
      //So, You SHOULD change this above code to work as dynamically.
    });

}

immer是使用不变性更新state的超级简单方法。

我强烈建议使用它。

case “update”:
const index = this.state.devData.findIndex(v => v.key === 1);

return {
        ...state,
        info: {
            ...state.info,
            devData: 
             [
               return [
       ...state.info.devData.slice(0, index),
       {
          data: action.payload.data,
          dateTime: action.payload.dateTime
       },
       ...state.slice(index + 1)
    ]
             ]
        }
    };

这个想法是首先找到需要更新的元素的索引。 之后,使用传播运算符创建新的区域,该区域由以下组成:待更新元素之前的所有内容的slice +更新元素+已更新元素之后的所有内容。

ps。 从我的手机写,所以没有测试

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM