Comment appliquer plusieurs filtres à l'aide de Redux Toolkit

Question

J'essaie de filtrer les données par catégories telles que le type, la marque, la couleur, le sexe à l'aide de Redux Toolkit. Les filtres fonctionnent individuellement, mais les filtres ne fonctionnent pas ensemble. Si je filtre d'abord la marque puis la couleur, le filtre de marque ne fonctionne pas. Que dois-je faire pour que cela fonctionne ?

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
            )
        },
    }
})

J'ai essayé d'écrire le filtre dans un réducteur mais ça ne marche toujours pas

Answer 1

Je pourrais faire quelque chose de similaire

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;
}

vous enregistrez donc les filtres actifs, puis définissez filteredItems sur la liste complète des éléments et appliquez chaque filtre individuellement.