Redux 过滤器窗格容器

Redux 过滤器窗格容器具有以下功能：

1. 显示过滤器标签和对应的过滤条件
2. 提供编辑、删除、添加过滤器的功能
3. 自动将添加、编辑、删除操作同步到 Redux Store 中
4. 根据当前的过滤条件筛选数据，返回筛选后的数据给子组件

如何使用

首先，需要在 Redux Store 中定义 filters 对象，每个属性对应一个过滤器的名称，值则是该过滤器的条件。

{
  filters: {
    active: { completed: false },
    completed: { completed: true },
    all: null
  }
}

接下来，在你的组件内使用它：

import FilterablePane from 'path/to/FilterablePane';

const MyComponent = () => {
  return (
    <FilterablePane
      filters={filters}
      onAddFilter={handleAddFilter}
      onEditFilter={handleEditFilter}
      onDeleteFilter={handleDeleteFilter}
    >
      ... // 子组件
    </FilterablePane>
  );
};

// 处理过滤器操作的回调
const handleAddFilter = (filterName, filterValue) => {
  // 将新创建的过滤器同步到 Redux Store 中
};

const handleEditFilter = (filterName, filterValue) => {
  // 将修改后的过滤器同步到 Redux Store 中
};

const handleDeleteFilter = (filterName) => {
  // 将删除的过滤器同步到 Redux Store 中
};

在子组件中，你可以使用 this.props.filteredData 获取筛选后的数据。

示例

import FilterablePane from 'path/to/FilterablePane';

const MyComponent = () => {
  return (
    <FilterablePane
      filters={{
        active: { completed: false },
        completed: { completed: true },
        all: null
      }}
      onAddFilter={handleAddFilter}
      onEditFilter={handleEditFilter}
      onDeleteFilter={handleDeleteFilter}
    >
      <TodoList todos={this.props.filteredData} />
    </FilterablePane>
  );
};

// 处理过滤器操作的回调
const handleAddFilter = (filterName, filterValue) => {
  store.dispatch(addFilter(filterName, filterValue));
};

const handleEditFilter = (filterName, filterValue) => {
  store.dispatch(editFilter(filterName, filterValue));
};

const handleDeleteFilter = (filterName) => {
  store.dispatch(deleteFilter(filterName));
};

API

属性

| 名称 | 类型 | 描述 | | ------------ | -------- | ------------------------------------------------------------- | | filters | object | 过滤器对象，每个属性对应一个过滤器的名称，值则是该过滤器的条件 | | onAddFilter | function | 创建新过滤器的回调函数 | | onEditFilter | function | 修改现有过滤器的回调函数 | | onDeleteFilter | function | 删除现有过滤器的回调函数 |

回调

onAddFilter(filterName: string, filterValue: object)

创建新的过滤器。

• filterName: string，新创建的过滤器的名称。
• filterValue: object，新创建的过滤器的条件。

onEditFilter(filterName: string, filterValue: object)

修改现有的过滤器。

• filterName: string，被修改的过滤器的名称。
• filterValue: object，修改后的过滤器的条件。

onDeleteFilter(filterName: string)

删除现有的过滤器。

• filterName, 被删除的过滤器的名称。

代码片段

<FilterablePane
  filters={{
    active: { completed: false },
    completed: { completed: true },
    all: null
  }}
  onAddFilter={handleAddFilter}
  onEditFilter={handleEditFilter}
  onDeleteFilter={handleDeleteFilter}
>
  <TodoList todos={this.props.filteredData} />
</FilterablePane>

const handleAddFilter = (filterName, filterValue) => {
  store.dispatch(addFilter(filterName, filterValue));
};

const handleEditFilter = (filterName, filterValue) => {
  store.dispatch(editFilter(filterName, filterValue));
};

const handleDeleteFilter = (filterName) => {
  store.dispatch(deleteFilter(filterName));
};