Cara menggunakan berbilang penapis menggunakan Redux Toolkit

Question

Saya cuba menapis data mengikut kategori seperti jenis, jenama, warna, jantina menggunakan Redux Toolkit. Penapis berfungsi secara individu, tetapi penapis tidak berfungsi bersama-sama. Jika saya menapis jenama dahulu dan kemudian warna, penapis jenama tidak berfungsi. Apakah yang perlu saya lakukan untuk membuat ini berfungsi?

const initialState = {
    products: data,
    filteredItems: data,
}

export const filterSlice = createSlice({
    name: "filter",
    initialState,
    reducers: {
        filterCategory: (state, action) => {
            if (action.payload === "All") {
                return initialState
            } else
            state.filteredItems = state.products.filter(
                (item) => item.category === action.payload
            ) 
        },
        filterGender: (state, action) => {
            state.filteredItems = state.products.filter(
                (item) => item.gender === action.payload
            ) 
        },
        filterColor: (state, action) => {
            state.filteredItems = state.products.filter(
                (item) => item.color === action.payload
            )
        },
        filterBrand: (state, action) => {
            state.filteredItems= state.products.filter(
                (item) => item.brand === action.payload
            )
        },
    }
})

Saya cuba menulis penapis dalam pengurangan tetapi masih tidak berfungsi

Answer 1

Saya mungkin melakukan sesuatu yang serupa

const initialState = {
    products: data,
    filteredItems: data,
    filters: {}
}

reducers: {
    filterCategory: (state, action) => {
        if (action.payload === "All") {
            return initialState
        } else {
            state.filters = { ...state.filters, category: action.payload }
            state.filteredItems = state.products;
        ) 
    },
    // ...etc.
    Object.entries(state.filters).forEach(([key, value]) => {
        state.filteredItems = state.filteredItems.filter(
            (item) => item[key] === value
        );
    });
    return state;
}

supaya anda boleh menyimpan penapis yang aktif dan kemudian tetapkan Item yang ditapis kepada senarai penuh item dan gunakan setiap penapis secara individu.