Redux - 從對象數組中過濾/刪除多個項目。 要過濾的項目在另一個數組中給出

Question

我有一個初始 state 變量，它是一個對象數組，並且想要過濾/刪除另一個數組中給出的多個對象，其中包含要在有效負載中過濾的對象的 id

const initialState = {
    data: [
        {
            name: "apple", 
            id: 1
        }, 
        {
            name: "orange", 
            id: 2
        }, 
        {
            name: "broccoli", 
            id: 3
        }, 
        {
            name: "spinach", 
            id: 4
        }, 
    ]
}

export default (state = initialState, { type, payload }) => {
    switch (type) {    
    case FILTER_ITEMS:
        //filteredArray = 
        return {
            ...state, 
            data: filteredArray
        }
}

我想從初始狀態中過濾沒有有效載荷內數組中給出的 id 的項目

payload = {
   excludeIds = [2,4]
}

所以在 reducer 運行后，initialState 應該更改為：

state = {
    data: [
        {
            name: "apple", 
            id: 1
        }, 
        {
            name: "broccoli", 
            id: 3
        }, 
    ]
}

Answer 1

使用Array.filter()和Array.includes()來獲取所有項目，其中id不會出現在排除數組中：

 const initialState = {"data":[{"name":"apple","id":1},{"name":"orange","id":2},{"name":"broccoli","id":3},{"name":"spinach","id":4}]} const state = initialState; const payload = { excludeIds: [2, 4] } const result = state.data.filter(o =>.payload.excludeIds.includes(o.id)) console.log(result)

在減速機中：

export default (state = initialState, { type, payload }) => {
    switch (type) {    
    case FILTER_ITEMS:
        const data = state.data.filter(o => !payload.excludeIds.includes(o.id))
        return {
            ...state, 
            data
        }
}

如果排除數組可能很大，則可以使用Set ，因為從 Set 中獲取項目的復雜度為 O(1)：

 const initialState = {"data":[{"name":"apple","id":1},{"name":"orange","id":2},{"name":"broccoli","id":3},{"name":"spinach","id":4}]} const state = initialState; const payload = { excludeIds: [2, 4] } const exclude = new Set(payload.excludeIds) const result = state.data.filter(o =>.exclude.has(o.id)) console.log(result)

Answer 2

您可以使用數組的indexOf function 。

filteredArray = state.data.filter(ele => payload.excludeIds.indexOf(ele.id) < 0 ? true : false)

測試：

 const initialState = { data: [ { name: "apple", id: 1 }, { name: "orange", id: 2 }, { name: "broccoli", id: 3 }, { name: "spinach", id: 4 }, ] } const payload = { excludeIds: [2,4] } filteredArray = initialState.data.filter(ele => payload.excludeIds.indexOf(ele.id) < 0? true: false) console.log(filteredArray)