过滤和已过滤状态

Question

我发现很难应付今天的任务，因为我是 react-redux 的新手。让我解释。我有两个下拉列表和一个网格，就像下面的屏幕截图一样：

下拉列表的目的是过滤我的虚拟数据，第一个并排，第二个按状态。我创建了两个动作：

export function filterBySide(product_side) {
    const filtered_data_by_side = data.filter(record =>
      {
          return record.side.match(product_side)
      });

    return {
      type: FILTER_BY_SIDE,
      payload: {
        filtered_data_by_side
      }
  };
}

export function filterByStatus(product_status) {
    const filtered_data_by_status = data.filter(record =>
      {
          return record.status.match(product_status)
      });

    return {
      type: FILTER_BY_STATUS,
      payload: {
        filtered_data_by_status
      }
  };
}

如您所见，第一个负责侧面过滤，另一个负责状态过滤。然后我将这些传递给我的减速器，如下所示：

case FILTER_BY_SIDE:
      return state.set('filtered_data_by_side', List(action.payload.filtered_data_by_side));
    case FILTER_BY_STATUS:
      return state.set('filtered_data_by_status', List(action.payload.filtered_data_by_status));

然后我使用 MapStateToProps 使它们在帐户列表中可用：

function mapStateToProps(state) {
  return {
    filtered_data_by_side:state.customer.get('filtered_data_by_side'),
    filtered_data_by_status:state.customer.get('filtered_data_by_status')
  };
}

我还将我的操作提取到下拉列表中。 我的问题是，当我在我的网格中将filtered_data_by_side 作为数据传递时，只有第一个动作发生，而当我传递filtered_data_by_status 时，第二个动作当然是合理的。 所需的功能是当我选择第一个下拉列表来过滤我的数据，然后我选择第二个必须由第一个下拉列表过滤的数据，然后是第二个下拉列表，反之亦然。我该怎么做？？？

Answer 1

一种方法是泛化过滤器函数并将过滤器持久化在reducer中。您可能拥有的是一个filterData 操作，它采用对象表示的不同类型的过滤器（即{ product_side : '...', product_status : '...' })）。当一个新的或现有的过滤器通过时，它可用于生成应用了所有其他过滤器的新数据。之后，可以在 reducer 中添加或更新它以维护过滤器的状态。

考虑以下几点：

// Action
function setFilters(myFilters) {
  return {
    type: SET_FILTERS,
    payload: {
      myFilters
    }
  };
}

// Usage
filterData({ ...oldFilters, status_filter: newStatusFilter });


// Reducer
function myReducer(state, action) {

   switch(action.type) {
    // ...
       FILTER:
         return Object.assign({}, state, {
           filters: action.payload
         });
    // ...
   }

}

渲染表格时，您可以查看属性以了解应用了哪些过滤器，然后在渲染之前相应地过滤数据。