how to modify a specific object at a index using spread operator in react-redux?

Question

I want to use spread operator. Scenario is that there are no of players (displayed as player tile on UI). Whenever I am clicking on any of player-tile, it is becoming active (getting highlighted). Condition is that at a time only one player should be highlighted. So, when a player-tile is clicked its attribute ifActive: true, and rest of players attribute ifActive: false The playerReducer is getting clicked player-id as action.payload (action.payload is giving the id of player which is currently clicked). Now I have to modify my state without mutating it. I have to use spread operator for it. how to modify a specific object at a index using spread operator?

const initialPlayerState = {
  tabs: [
    { id: 1, name: 'player 1', ifActive: false },
    { id: 2, name: 'player 2', ifActive: false },
    { id: 3, name: 'player 3', ifActive: false },
  ]
} 
const playerReducer = (state = initialPlayerState , action) => {
    switch (action.type) {
        case SELECT_PLAYER:
          //how to modify state using spread operator, and how to modify 
          //a specific object at a specific index.  
          return { ...state, /*some code hrere*/};
        default:
          return state;
    }
}

how to modify a specific object at a index using spread operator? Strictly, I have to use spread operator and each player should have ifActive attribute.

elmeister · Accepted Answer · 2016-09-05 09:47:49Z

2

If you need to update one of the players, for example ifActive flag, and recreate the tabs array to trigger re-render of tabs component, you can do it like this

    const initialPlayerState = {
      tabs: [
        { id: 1, name: 'player 1', ifActive: false },
        { id: 2, name: 'player 2', ifActive: false },
        { id: 3, name: 'player 3', ifActive: false },
      ]
    } 
    const playerReducer = (state = initialPlayerState , action) => {
        switch (action.type) {
            case SELECT_PLAYER:
              return { 
                ...state, // If you have something else in your state
                tabs: tabs.map(player => player.ifActive || player.id === action.id ? {
                  ...player,
                  ifActive: player.id === action.id
                } : player)
              };
            default:
              return state;
        }
    }

edited Sep 5, 2016 at 9:47

answered Sep 5, 2016 at 7:35

elmeister

1841 gold badge3 silver badges6 bronze badges

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

4 Comments

DDS Over a year ago

This is wrong because you're mutating tabs by using splice and tabs is part of the old state which needs to be immutable. You should use slice, not splice.

DDS Over a year ago

This is also wrong because you're failing to unset the previous ifActive.

elmeister Over a year ago

Good catch with splice, my bad, thanks. And you are right with incorrect update of ifActive flag.

Raj Rj Over a year ago

@DDS Well, Because I'm very new to React-Redux I'm little not sure what you mean to say. Could you please tell me in detail what has to be done. It will be great help.

Raj Rj · Accepted Answer · 2016-09-14 05:36:48Z

2

return { ...state, players: state.players.map(player => ({ ...player, selected: player.id === action.id })) };

answered Sep 14, 2016 at 5:36

Raj Rj

3,5875 gold badges27 silver badges34 bronze badges

Collectives™ on Stack Overflow

how to modify a specific object at a index using spread operator in react-redux?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related