Question: Update the object in devData array with key = 1 this way: -> update data and 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"
}
]
}
}
My update method in 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;
})
}
};
}
My problems:
My update method is complicating and ugly, difficult to understand
I am not sure, if I am really doing this update in an immutable way
I think my update method is computationally expensive , not efficient
I need a method for updating to address the problems above.
First install the immer
.
and just update a part of your state
which you want.
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
is a super simple way to update the state
with immutability.
I strongly recommend using it.
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)
]
]
}
};
the idea is to first find an index of an element neede to update. after that use spread operators to create new areay made of: slice
of everything before element to be updated + updated element + everything after updated element.
ps. writing from my mobile so didnt test it
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.