如何过滤反应 redux 减速器 state 的阵列？

Question

This is my reducer file in react

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

export const reducer = (state = initialState, action) => {
    switch (action.type) {
        case REVERSE:
            let newProd = [ ...state.products ];

            newProd.filter((a) => {
                if (a.inCart === true) {
                    return a;
                }
            });

            console.log(newProd);

            return {
                ...state,
                products: newProd
            };
        default:
            return state;
    }
};

and this is the console log of newProd which shows the filter function doesn't work

0: {name: "Icecream", inCart: false, num: 2}
1: {name: "Cake", inCart: true, num: 5}
length: 2
__proto__: Array(0)

How can I filter the products array so I can only get the item that has inCart = true and replace it with the old products array?

Answer 1

Filter returns a new array & won't mutate the original one. You are filtering but not assigning the output of filter to a variable.

Do this

export const reducer = (state = initialState, action) => {
    switch (action.type) {
        case REVERSE:
            let newProd = state.products.filter((a) => { //<---- like this
                if (a.inCart === true) {
                    return a;
                }
            });

            console.log(newProd);

            return {
                ...state,
                products: newProd
            };
        default:
            return state;
    }
};

You can also do it in a single liner - like this:

...
case REVERSE:
    return {
        ...state,
        products: state.products.filter(a => a.inCart)
    };
...