Я пытаюсь изучить селекторы Redux и Redux.У моего приложения React есть группа списков, где каждая кнопка группы списков представляет категорию.Он также отображает все предметы из избыточного магазина.Когда пользователь нажимает на категорию, должны отображаться только те элементы, которые относятся к выбранной категории.Я создал селектор, который фильтрует элементы, относящиеся к категории «Стратегия», и выглядит это так:
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 должно вызывать селектор и обновлять состояние избыточности или состояние компонента, чтобы приложение отображало только элементы, принадлежащие к выбранной категории.Какой самый простой способ добиться этого?