Как сгенерировать отфильтрованный список с помощью повторного выбора redux на основе stati c отфильтрованных значений?

Question

Я получаю данные новостей из API, в приложении мне нужно показать 3 списка. Сегодняшние новости, вчерашние новости, статьи новостей.

Я думаю, мне следует использовать повторный выбор с сокращением. Тем не менее, все примеры, которые я посещаю, имеют значение фильтра Dynami c (фильтр состояния), в то время как мне нужны данные для статического хранения (эти фильтры не меняются)

мое состояние на данный момент

{news : [] }

Как я могу сгенерировать что-то подобное ниже, используя повторный выбор

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

, следует ли использовать повторный выбор или просто фильтровать внутри компонента? Я думаю, что повторный выбор запоминается, поэтому я предпочитаю использовать повторный выбор для производительности

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>

Вы используете селекторы, когда вам нужно вычислить значения на основе состояния, такого как общая сумма списка или отфильтрованные элементы из списка. Таким образом, вам не нужно дублировать данные в вашем штате.