javascript - 如何在 react redux reducer 状态下更改数组中的对象值？

Question

这是我的 react redux reducer

const initialState = {
    products: [
        {
            name: 'Icecream',
            inCart: false
        },
        {
            name: 'Cake',
            inCart: false
        }
    ]
};

export const reducer = (state = initialState, action) => {
    switch (action.type) {
        case BUY_CAKE:
            return {
                state
            };
        default:
            return state;
    }
};

当调用 BUY_CAKE 操作时，我想在 products 数组中将第一个对象的 inCart 值更改为 true 。我该怎么做 ？？

标签： javascriptarraysreactjsreduxstate

Answer 1

假设action.payload等于 object {name: 'Cake', inCart: true}，那么您可以执行以下操作：

const initialState = {
    products: [
        {
            name: 'Icecream',
            inCart: false
        },
        {
            name: 'Cake',
            inCart: false
        }
    ]
};

export const reducer = (state = initialState, action) => {
    switch (action.type) {
        case BUY_CAKE:
            const products = return state.products.map(item => {
              if(item.name !== action.payload.name) {
                return item;
              }
              
              return {
                ...item, 
                inCart: action.payload.inCart
              }
            })
            
            return {
              ...state,
              products
            }
            
        default:
            return state;
    }
};