如何使用基于静态过滤值的重新选择 redux 生成过滤列表? [英] How to generate filtered list using reselect redux based on static filtered values?
问题描述
我正在从 API 获取新闻数据,在应用中我需要显示 3 个列表.今日新闻、昨日新闻、文章新闻.
I am fetching news data from an API, in the app I need to show 3 lists. today news, yesterday news, article news.
我想我应该使用 redux reselect.但是,我访问的所有示例都有一个动态过滤器值(状态过滤器),而我需要静态归档数据(这些过滤器没有状态更改)
I think I should use redux reselect. However, all the examples I am visiting has a dynamic filter value (state filter) while I need data to be fileted statically (no state changes these filters)
我现在的状态是
{news : [] }
如何使用 reselect 生成如下内容
How can I generate something like below using reselect
{news: [], todayNews:[], yesterdayNews:[], articleNews: []}
我应该使用 reselect 还是应该只在组件内部进行过滤?我认为 reselect 被记住了所以我更喜欢使用 reselect 来提高性能
should I use reselect or I should just filter inside a component? I think reselect is memorized so I prefer to use reselect for performance
推荐答案
您可以执行以下操作:
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>
当您需要根据状态(例如列表的总数或从列表中过滤的内容)计算值时,可以使用选择器.这样您就无需复制您所在州的数据.
You use selectors when you need to calculate values based on state such as the total of a list or filtered things from a list. This way you don't need to duplicate the data in your state.
这篇关于如何使用基于静态过滤值的重新选择 redux 生成过滤列表?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!