So wenden Sie mehrere Filter mit dem Redux Toolkit an

Question

Ich versuche, Daten mithilfe des Redux Toolkit nach Kategorien wie Typ, Marke, Farbe und Geschlecht zu filtern. Filter funktionieren einzeln, aber nicht zusammen. Wenn ich zuerst die Marke und dann die Farbe herausfiltere, funktioniert der Markenfilter nicht. Was muss ich tun, damit das funktioniert?

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

Ich habe versucht, den Filter in einen Reduzierer zu schreiben, aber es funktioniert immer noch nicht

Answer 1

我可能会做类似的事情

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

以便您保存哪些过滤器处于活动状态，然后将filteredItems 设置为完整的项目列表，然后单独应用每个过滤器。