Один из моих компонентов был повторным рендерингом, и я понял, что это из-за селектора allPageViews ниже:
const getPages = (state: IAppState) => {
return state.pages;
};
export const attachPageViews = createSelector(
getPages,
(pages) => pages.pageViews
);
export const selectPageViews = createSelector(
attachPageViews,
(pageViews) => pageViews
);
export const allPageViews = createSelector(
selectPageViews,
(pageStore: PageViewStore) => {
let returnedPageViews: PageView[] = [];
for (const section of Object.values(pageStore.sections)) {
for (const page of Object.values(section!.pageViews)) {
returnedPageViews = [...returnedPageViews, page!];
}
}
return returnedPageViews;
}
);
Когда я отправлял действие, я менял редуктор страниц, но не элементы pageView, содержащиеся внутри (у страниц есть другой ключ, называемый данными, которые я обновлял). Итак, насколько я понимаю, selectPageViews не должен изменяться (потому что базовые pageViews не меняются), и поэтому allPageViews должны просто запоминать, а не пересчитывать, потому что ничего не было обновлено.
Тем не менее, это был пересчет. Когда я переместил массив returnPageViews и циклы for в компонент, который использовал useSelector (), то этот компонент прекратил повторный рендеринг.
Итак, мой вопрос: как работает Reselect, и почему он повторно вычисляет и запускает повторную визуализацию, когда массив создавался в allPageViews?