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

时间:2020-05-27 03:24:51

标签: redux reselect

我正在从API提取新闻数据,在该应用中,我需要显示3个列表。今天新闻,昨天新闻,文章新闻。

我认为我应该使用redux重新选择。但是,我要访问的所有示例都具有动态过滤器值(状态过滤器),而我需要静态地归档数据(这些过滤器没有状态改变)

我目前的状态是

{news : [] }

如何使用重新选择生成以下内容

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

我应该使用重新选择,还是只在组件内部进行过滤?我认为记忆是重新选择的,所以我更喜欢使用重新选择来提高性能

1 个答案:

答案 0 :(得分:0)

您可以执行以下操作:

<sessionState mode="InProc" ... />
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));

当您需要根据状态(例如列表总数或列表中已过滤的内容)来计算值时,可以使用选择器。这样,您无需在您的状态下复制数据。

相关问题