过滤并已过滤状态

Question

我觉得很难应对今天的任务，因为我是反应减少的新人。让我解释。我有两个下拉列表和一个网格，如下面的截图：

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

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
         });
    // ...
   }

}

渲染表格时，您可以查看属性以查看已应用的滤镜，然后在渲染之前相应地过滤数据。