多个复选框搜索过滤器使用React Redux

Question

我想在我的react-redux应用程序中创建多个复选框搜索过滤器。

我添加了复选框，这将向API提出请求，但是问题是，每次我单击复选框时，新数据都来自API，该数据正在覆盖该州的旧数据。

我如何保留我的旧状态？还是还有其他方法可以做到这一点？

这是我的还原

 import * as types from '../constants';
 const InitialState = { data: [], };
 export const dataReducer = (state= InitialState , action = null) => 
 { 
    switch(action.type) {
     case types.GET_DATA:
       return Object.assign({}, state, {data:action.payload.data });
     default: 
       return state;
    } 
 } 

Answer 1

在问题的问题中有点不清楚如何在仍获取新数据的同时保留旧数据，但是鉴于数据是一个数组，我'LL假设您的意思是要合并它们。

export const dataReducer = (state= InitialState , action = null) => 
{
    switch(action.type) {
        case types.GET_DATA:
            return Object.assign({}, state, {data: [...state.data, ...action.payload.data] });
        default:
            return state;
    }
}

这就是假设您始终可以附加新数据。如果没有

export const dataReducer = (state= InitialState , action = null) => 
{
    switch(action.type) {
        case types.GET_DATA:
            let data = [...action.payload.data]
            // merge in the relevant items from state.data, e.g.
            for (let item in state.data.filter(it => it.shouldBeKept)) {
                data.push(item)
            }
            return Object.assign({}, state, { data });
        default:
            return state;
    }
}

显然，您将最了解如何识别是否保留的项目，修改逻辑听到以最适合您的需求。例如，从let data = [...state.data]开始并从action.payload.data中选择性合并项目，或者从一个空数组开始，然后从任何一个数组中选择。重要的部分是您构造一个新数组，而不是在状态中的现有数组中添加项目。