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

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

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的项目，或者从一个空数组开始并从两个数组中选择并选择它可能会让莫斯有意义。 重要的是您构建一个新数组，而不是将项添加到该状态的现有数组中。

使用react redux的多个复选框搜索过滤器

1 个答案: