How to modify a certain object in array of objects that stored in redux state

Question

let's say I've data stored in a redux state like this

state = {
records : [
    {id:"1", name:"foo", city:"A"},
    {id:"2", name:"bar", city:"B"},
    {id:"3", name:"abc", city:"C"},
]
}

how do I change any attribute of any record dynamically using immutable way?

Ehsan · Accepted Answer · 2019-03-25T07:25:20.717

1

Something like this:

case 'SOMETHING': 
const recordsCopy = {...state.records};
//change recordsCopy ...
const recordToChange = recordsCopy.find(x => x.id === '3')
if(recordToChange) {
   recordToChange.name = 'new name';
}
return {...state, records: [...recordsCopy]}

edited Mar 25 '19 at 07:25

answered Mar 25 '19 at 07:10

Ehsan

1,093
1
12
21

how do I change the name of record no.3 only? – Necrofantaisie Mar 25 '19 at 07:12
I update the answer. – Ehsan Mar 25 '19 at 07:25
if there's no id attribute it is possible to change? – Necrofantaisie Mar 25 '19 at 07:32
Find logic is up to you and your design. You should find your item first anyway. – Ehsan Mar 25 '19 at 07:34
i mean how do i do the same thing with array index instead of id attribute – Necrofantaisie Mar 25 '19 at 07:35
Do you mean something like this? const recordToChange = recordsCopy[2] – Ehsan Mar 25 '19 at 07:36
yes, exactly like that – Necrofantaisie Mar 25 '19 at 07:39
nevermind, I've solve that using state.records.map(record,i) = >{} – Necrofantaisie Mar 25 '19 at 08:52

Harish · Answer 2 · 2019-03-25T07:18:16.357

let say, you have the id (let 2) of record and you want to update name (to "pqr")

function reducer (state, action){
  const {type, payload}  = action
  switch(type){
  case: "UPDATE": 
       return updateRecord(state, payload.id, payload.newname)
  default: return state;
  }
}

function updateRecord(state, id, newName){
  const newRecords = state.records.map(rec => {
     if(rec.id === id){ return {...rec, name: newname} }
     return rec
   })
  return {...state, records: newRecords}

}

How to modify a certain object in array of objects that stored in redux state

2 Answers2