javascript - 如何使用带有按钮的 Redux 选择器（Reselect）来查询 Redux 存储

Question

我正在尝试学习 Redux 和 Redux 选择器。我的 React 应用程序有列表组，其中每个列表组按钮代表一个类别。它还显示来自 redux 商店的所有项目。当用户点击一个类别时，应该只显示属于点击类别的项目。我已经构建了过滤属于“策略”类别的项目的选择器，它看起来像这样：

const categorySelector = createSelector(
    allBoardgames,
    data => data.filter(d => d.value.category.some(cat => cat === 'Strategy'))
);

我将状态映射到这样的道具：

function mapStateToProps(state) {
    return {
    results: categorySelector(state)
    };
}

我的列表组呈现如下：

renderCategories() {
    return this.state.categories.map(category => {
      return (
        <ListGroupItem
          tag='button'
          action
          key={category.key}
          //onClick={() => this.props.fetchCategoryItems(category.value)}
        >
          {category.value}
        </ListGroupItem>
      );
    });
}

现在 onClick 事件应该调用选择器并更新 redux 状态或组件状态，以便应用程序只显示属于单击类别的项目。实现这一目标的最简单方法是什么？

标签： javascriptreactjsredux