react-redux array adding lists

Question

This is part of my redux code for 'adding lists'.

I want to fill list_01, list_02, list_03, list_04, list_06 when request comes in.

But the lockerReducer seems to have a problem in filling in those lists.

I want to access directly to list_01, list_02, list_03, list_04, list_06 to put array lists in them.

Anyone knows the answer?

import _ from 'lodash'

export const lockerState = {
  locker: {
    list_01: [],
    list_02: [],
    list_03: [],
    list_04: [],
    list_06: []
  }
}

export const lockerAction = {
  INIT_LIST: 'INIT_LIST',

}

// REDUCERS
export const lockerReducer = (state = lockerState, action) => {
  switch (action.type) {
    case lockerAction.INIT_LIST:

      switch (action.payload.menu) {
        case '01':
          console.log(action.payload.menu, action.payload.list, action.payload.menu)
          return {
            ...state,
            list_01: [state.locker.list_01, action.payload.list]
          }
        case '02':
          return {
            ...state,
            list_02: [state.locker.list_02, action.payload.list]
          }
        case '03':
          return {
            ...state,
            list_03: [state.locker.list_03, action.payload.list]
          }
        case '04':
          return {
            ...state,
            list_04: [state.locker.list_04, action.payload.list]
          }
        case '06':
          return {
            ...state,
            list_06: [state.locker.list_06, action.payload.list]
          }
        default:
          return {
            ...state,
            list_01: [...state.locker.list_01, action.payload.list]
          }
      }

    default:
      return state
  }
}

// ACTION CREATOR
export const initList = (category, list, menu) => {
  //console.log('initList action creator-> ', category, list, menu)
  return {
    type: lockerAction.INIT_LIST,
    payload: {
      category, list, menu
    }
  }
}

There no Error message but result is not what I expected

Redux Dev tool - Result Img

Answer 1

If you are trying to create new list from existing list + new array of items, you would have to use spread operator. What you are doing right now creates nested list inside a list. If you are trying to create a single level list, reference the code below.

return {
    ...state,
    list_02:[...state.locker.list_02, ...action.payload.list]
}