How to access an attribute in an object array in Redux state?

Question

I'm very new to Redux, and confused as to how to update nested state.

const initialState = {
    feature: '',
    scenarios: [{
        description: '',
        steps: []
    }]
}

I know that to just push to an array in an immutable way, we could do,

state = {
    scenarios: [...state.scenarios, action.payload]
}

And to push into a specific attribute, as this SO answer suggests How to access array (object) elements in redux state , we could do

state.scenarios[0].description = action.payload

But my question is, how would we access a particular attribute in an object array without mentioning the index? is there a way for us to push it to the last empty element?

All suggestions are welcome to help me understand, thank you in advance :)

Answer 1

Redux helps to decouple your state transformations and the way you render your data.

Modifying your array only happens inside your reducers. To specify which scenario's description you want to modify is easy to achieve by using an identifier. If your scenario has in id, it should be included in your action, eg

{
  "type": "update_scenario_description",
  "payload": {
    "scenario": "your-id",
    "description": "New content here"
  }
}

You can have a reducer per scenario. The higher level reducer for all scenarios can forward the action to the specific reducer based on the scenario id, so that only this scenario will be updated.

In your ui, you can use the array of scenarios and your scenario id to render only the specific one you're currently viewing.

For a more detailed explanation, have a look at the todo example . This is basically the same, as each todo has an id, you have one reducer for all todos and a specific reducer per todo, which is handled by it's id.

Answer 2

In addition to the accepted answer, I'd like to mention something in case someone still wants to "access a particular attribute in an object array without mentioning the index".

 'use strict' const initialState = { feature: '', scenarios: [{ description: '', steps: [] }] } let blank = {} Object.keys(initialState.scenarios[0]).map(scene => { if (scene === 'steps'){ blank[scene] = [1, 2] } else { blank[scene]=initialState.scenarios[0][scene] } }) const finalState = { ...initialState, scenarios: blank } console.log(initialState) console.log(finalState) 

However, if scenarios property of initialState instead of being an object inside an array, had it been a simple object like scenarios:{description:'', steps: []} , the solution would have been much simpler:

 'use strict' const initialState = { feature: '', scenarios: { description: '', steps: [] } } const finalState = { ...initialState, scenarios: { ...initialState.scenarios, steps: [1, 2, 4] } } console.log(initialState) console.log(finalState)