Composing a redux reducer for nested objects in an array

Question

I'm new to Redux and am having some difficulty composing a working reducer for my situation.

My current state looks like this

export const userData = {
  userID: '12345678',
  userDetails: {
    firstName: 'Joe',
    surname: 'Bloggs'
  },
  currentGames: [
    {
      gameId: 'G-00000001',
      gameSelections: [
        {
          subgameId: '',
          selection: ''
        }
      ]
    }
  ]
};

My action looks like this

function selectWinner (gameId, subgameId, selection) {
  return {
    type: SELECT_WINNER,
    gameId,
    subgameId,
    selection
  }
}

The aim is to be able to add/update the objects in the gameSelections array.

There may be more than one Object in the currentGames array also.

I've heard I should use .map but I'm not really sure how.

Cat_Enthusiast · Accepted Answer · 2019-09-13 10:40:38Z

You're on the right track for using .map() to iterate over the array of objects. It also looks like your action-creator has all the necessary parameters to update your reducer state.

Your reducer can look something like this:

const userReducer = (state=userData, action) => {
    switch(action.type){
       case SELECT_WINNER:
            return {
                ...state,
                currentGames: [...state.currentGames].map((game) => {
                     if(game.gameId == action.gameId){
                        return {
                           ...game,
                           gameSelections: [...game.gameSelections].map((gameSelection) => {
                               if(gameSelection.subgameId == action.subgameId){
                                  return {
                                      ...gameSelection,
                                      selection: action.selection
                                  }
                               } else {
                                   return gameSelection
                               }
                           })
                        }
                     } else {
                         return game
                     }
                })
            }
       default:
           return state
    }
}

Kind of messy, but would get the job-done with a deeply nested state.

Maksym Bezruchko · Accepted Answer · 2019-09-13 10:42:17Z

0

Add item to array:

case'ADD_ITEM':
    return { 
        ...state,
        some_arr: [...state.some_arr, action.payload]
    }

update spicific item in array:

case 'UPDATE_ITEM':
   return { 
       ...state, 
       some_arr: state. some_arr.map(
           (item, index) => index === specific_index
              ? {...item, ...action.payload}
              : content
       )
    }

answered Sep 13, 2019 at 10:42

Maksym Bezruchko

1,2588 silver badges24 bronze badges

Comments

amardeep saini · Accepted Answer · 2019-09-13 10:56:27Z

Deep cloning of the state is required. useful link-https://redux.js.org/recipes/structuring-reducers/immutable-update-patterns

const reducer = (state = userData, action) => {
switch (action.type) {
    case CASENAME:
        return {
            userID: state.userID,
            userDetails: {
                ...state.userdetails
            },
            currentGames: [
                {
                    gameId: action.gameId,
                    gameSelections: [
                        {
                            subgameId: action.subgameId,
                            selection: action.selection
                        }
                    ]
                }
            ]
        };
}

}

Collectives™ on Stack Overflow

Composing a redux reducer for nested objects in an array

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related