suchen

Heim  >  Fragen und Antworten  >  Hauptteil

So wenden Sie mehrere Filter mit dem Redux Toolkit an

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

P粉600845163P粉600845163319 Tage vor478

Antworte allen(1)Ich werde antworten

  • P粉978742405

    P粉9787424052024-02-22 10:06:57

    我可能会做类似的事情

    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 设置为完整的项目列表,然后单独应用每个过滤器。

    Antwort
    0
  • StornierenAntwort