Toggle Redux State Attribute of in Array of Objects

Question

I have an object as follows:

{
  "1": {"stepNumber": 1, "isActive": false},
  "2": {"stepNumber": 2, "isActive": true},
  "3": {"stepNumber": 3, "isActive": true},
  "4": {"stepNumber": 4, "isActive": false}
}

In my reducer I'm sending through an action TOGGLE_ACTIVE_STEP which takes a payload of stepNumber Eg. 1 or 2 or 3...

Here's my reducer at the moment:

case TOGGLE_ACTIVE_STEP: {
  state.processSteps[action.data.stepNumber.toString()].isActive =
  !state.processSteps[action.data.stepNumber.toString()].isActive;

  console.log(JSON.stringify(state.processSteps));

  return {
    ...state,
    processSteps: state.processSteps,
  };
}

It's a pretty messy fix and I know that setting the state the way I do is not best practice since you should reassign parameters that way.

What is the best way to perform this same functionality?

What are you trying to achieve?

Oro
– Oro

2017-10-30 10:35:46 +00:00
Commented Oct 30, 2017 at 10:35 — Oro
– Oro, Commented Oct 30, 2017 at 10:35
Immutability Helper.

Arman Charan
– Arman Charan

2017-10-30 10:36:53 +00:00
Commented Oct 30, 2017 at 10:36 — Arman Charan
– Arman Charan, Commented Oct 30, 2017 at 10:36

Hemerson Carlin · Accepted Answer · 2017-10-30 10:38:51Z

2

Keep spreading props just like you are spreading state:

case TOGGLE_ACTIVE_STEP: {
  return {
    ...state,
    processSteps: {
      ...state.processSteps,
      [action.data.stepNumber]: {
        ...state.processSteps[action.data.stepNumber],
        isActive: !state.processSteps[action.data.stepNumber].isActive,
      }
    },
  }
}

answered Oct 30, 2017 at 10:38

Hemerson Carlin

7,4241 gold badge29 silver badges38 bronze badges

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

1 Comment

Barry Michael Doyle Over a year ago

Works like a charm! Thank you :)

Collectives™ on Stack Overflow

Toggle Redux State Attribute of in Array of Objects

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related