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 :)

Martin Seeler · Accepted Answer · 2017-12-13 05:47:31Z

3

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, e.g.

{
  "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.

answered Dec 13, 2017 at 5:47

Martin Seeler

7,0023 gold badges36 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Niveditha Karmegam Over a year ago

Thanks a lot, this helped! But using this approach, how would i be able to access the steps array inside the scenario array? I'm realizing that having too many dependencies is becoming a problem, but i dont see any other solutions.

Martin Seeler Over a year ago

Basically the same way. You should provide both identifiers (scenario and step) in your action to distinguish to which reducer the action should be passed. Therefore, you could either implement the step forwarding inside the scenario reducer the same way you forward them from the scenarios reducer, or add a separated reducer to your scenarios reducer which only handles steps by both ids.

Niladri Basu · Accepted Answer · 2017-12-13 07:08:27Z

1

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)

edited Dec 13, 2017 at 7:08

answered Dec 13, 2017 at 7:02

Niladri Basu

10.7k7 gold badges59 silver badges65 bronze badges

4 Comments

Niveditha Karmegam Over a year ago

An extremely helpful answer, thanks a lot!! I would also like to ask.. i know the dependency in the structure is not helpful at all. But i need a scenario array where every scenario contains a steps array. Would you be able to suggest any work around to this? instead of having nested arrays?

Martin Seeler Over a year ago

Sorry but can you please describe in more detail, how this helps to modify only a single property of a specific step inside a specific scenario?

Niladri Basu Over a year ago

@NivedithaKarmegam post a question while giving an example, I'll try to answer. PS: I'm also new to redux

Niveditha Karmegam Over a year ago

@MartinSeeler the requirement is such that there are multiple scenarios and every scenario would have its own set of steps. And the number of steps and scenarios are not fixed, it depends on the user. In addition the steps and scenarios should be editable, deletable and swappable, so i decided arrays would be the best option. As BlackBeard suggested i will also post a new question so i could be more descriptive.

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related