重构 javascript 代码 react redux 问题

Question

I've code like below. No deep knowledge in javascript. Want to add some product in redux. My reducer initial definition is below

const initState = {
    order: {
        item1: [],
        item2: [],
        item3: [],
      }
    }

To add different items to the cart I'm using below function. Every item will be a list of object

    const addToCart = (state, action) => {
    if (action.payload.service === 'item1') {
        return {
            ...state,
            order: {
                ...state.order,
                item1: [...state.order.item1, action.payload.item]
            }
        }
    } else if (action.payload.service === 'item2') {
        return {
            ...state,
            order: {
                ...state.order,
                item2: [...state.order.item2, action.payload.item]
            }
        }
    }
}

can it be done in a single code dynamically without condition? My order will be like below

order: {
        item1: [{'name': 'name1', 'quantity': 2}, {'name': 'name3', 'quantity': 5}],
        item2: [],
        item3: [],
      }

Answer 1

I believe that for you to take out the conditional statement, assuming that the name of the key of the order is the same as the service name from your payload, you can access and assign the key by passing the value from the payload itself. So instead of something like you have in the reducer, you will get something like this:

 const addToCart = (state, action) => { return { ...state, order: { ...state.order, [action.payload.service]: [...state.order[action.payload.service], action.payload.item] } } }