如何使用基于静态过滤值的重新选择 redux 生成过滤列表？

Question

我正在从 API 中获取新闻数据，在应用程序中我需要显示 3 个列表。今日新闻，昨日新闻，文章新闻。

我想我应该使用 redux reselect。但是，我访问的所有示例都有一个动态过滤器值（状态过滤器），而我需要静态归档数据（没有状态更改这些过滤器）

我现在的状态是

{news : [] }

如何使用重新选择生成如下所示的内容

{news: [], todayNews:[], yesterdayNews:[], articleNews: []}

我应该使用 reselect 还是只在组件内部过滤？我认为重新选择被记住了，所以我更喜欢使用重新选择来提高性能

Answer 1

您可以执行以下操作：

const { createSelector } = Reselect;
const state = {
  news: [
    { id: 1, name: 'one' },
    { id: 2, name: 'two' },
    { id: 3, name: 'three' },
  ],
};
const selectNews = (state) => state.news;
const selectOdds = createSelector(selectNews, (news) =>
  news.filter(({ id }) => id % 2 !== 0)
);
const selectEvens = createSelector(selectNews, (news) =>
  news.filter(({ id }) => id % 2 === 0)
);
const selectFilteredNews = createSelector(
  selectNews,
  selectEvens,
  selectOdds,
  (news, even, odd) => ({ news, even, odd })
);
const news = selectFilteredNews(state);
console.log('news:', JSON.stringify(news, undefined, 2));

<script src="https://cdnjs.cloudflare.com/ajax/libs/reselect/4.0.0/reselect.min.js"></script>


<div id="root"></div>

当您需要根据状态计算值时，例如列表的总计或列表中筛选的内容，您可以使用选择器。这样您就不需要复制您所在州的数据。

如何使用基于静态过滤值的重新选择 redux 生成过滤列表？

How to generate filtered list using reselect redux based on static filtered values?

redux

reselect