Update a store property - redux

Question

I am getting a response from an API as below:
{
"results": {
"6": {
"id": 6,
"name": "akkha madrasi mirchi1",
},
"7": {
"id": 7,
"name": "almonds",
},
"8": {
"id": 8,
"name": "alu1",
}
}
}
I am storing response.results in results reducer store {} so that I can access results as store.results. I want to modify an object inside the results. The API only returns the updated object. Now I want to update id: 6 in store.results.
{
"results": {
"6": {
"id": 6,
"name": "Modified akkha madrasi mirchi1",
}
}
}
If I do this in the results reducer:
[...state,action.response]
will the object with key 6 replace the object with matching keys?
I am expecting state to be (note name changed to Modified akkha madrasi mirchi1 for id: 6):
"results": {
"6": {
"id": 6,
"name": "Modified akkha madrasi mirchi1",
},
"7": {
"id": 7,
"name": "almonds",
},
"8": {
"id": 8,
"name": "alu1",
}
}
I want objects to be updated even if they are nested. Just match the key and keep on replacing.

Answer 1

If I do this in the results reducer:
[...state,action.response]
will the object with key 6 replace the object with matching keys?
No. This is what you might use if your state was an array, but from the information you've given it's an object (all of results is an object with ids as keys).
What you're probably looking for is something like this:
return {
...state,
...action.response.results
}
This will create a shallow copy of the state, preserving the object references for each result item (more efficient than doing a deep copy if you don't need to). It will then overwrite the previous id: 6 with whatever is in response.results.
Couple of things to remember about this:
It assumes you have object spread available. If not, Object.assign({}, state, action.response.results) will have the same effect but (IMHO) is not as clear.
Whatever is returned from the server will entirely replace whatever you already had in id: 6. That means if you were tracking various bits of state in the client for that id, or the server doesn't return everything you need, you might get some unexpected results.
const state = {
6: {
id: 6,
name: 'akkha madrasi mirchi1'
},
7: {
id: 7,
name: 'almonds'
},
8: {
id: 8,
name: 'alu1'
}
}
const response = {
results: {
6: {
id: 6,
name: 'Modified akkha madrasi mirchi1'
}
}
}
console.log({
...state,
...response.results
})
Just for completeness, here's how you'd reduce it if you had the nested structure as described in comment thread:
const state = {
results: {
6: {
id: 6,
name: 'akkha madrasi mirchi1'
},
7: {
id: 7,
name: 'almonds'
},
8: {
id: 8,
name: 'alu1'
}
}
}
const response = {
results: {
6: {
id: 6,
name: 'Modified akkha madrasi mirchi1'
}
}
}
console.log({
...state,
results: {
...state.results,
...response.results
}
})

Answer 2

Assuming that state is:
{
"6": {
"id": 6,
"name": "akkha madrasi mirchi1"
},
"7": {
"id": 7,
"name": "almonds"
},
"8": {
"id": 8,
"name": "alu1"
}
}
and you want to update with the following:
const obj = {
"6": {
"id": 6,
"name": "Modified akkha madrasi mirchi1"
}
};
Then the following will do it:
state = Object.assign( {}, state, obj);

Answer 3

I could do it using the immutability-helper
this is my action creator:
export function itemupdate(response) {
return {
type: 'ITEMS_UPDATE_DATA_SUCCESS',
idx: Object.keys(response.results)[0],
obj: response.results[Object.keys(response.results)[0]]
}
}
This is how i replace that particular id object in the results.
export function data(state = {}, action) {
case 'ITEMS_UPDATE_DATA_SUCCESS':
return update(state,{results: {[action.idx]: {$set: action.obj} }})
default:
return state;
}