[英]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;
})
}
};
}
我的問題:
我的更新方法復雜且丑陋,難以理解
我不確定,如果我真的以不變的方式進行此更新
我認為我的更新方法計算量很大 ,效率不高
我需要一種更新方法來解決上述問題。
首先安裝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.