如何使用 redux reselect 避免冗余

问题描述

我有一个包含帖子的 redux 状态，我将其存储为具有以下形状的单个对象：

posts: {
   1: { isPublic: true,content: 'foo' },2: { isPublic: true,content: 'bar' },3: { isPublic: false,content: 'foobar' },}

我正在使用 reselect 从我的组件中获取状态，并且为此创建了 2 个选择器：

const getPostsEntities = (state) => state.posts;


export const getPosts = createSelector(
    [ getPostsEntities ],(posts) => Object.keys(posts).map( id => posts[id])
);

export const getPublicPosts= createSelector(
    [ getPostsEntities ],(posts) => Object.keys(posts).map( id => posts[id]).filter( post => post.isPublic )

);

我怀疑这部分在任何选择器中似乎都是多余的

(posts) => Object.keys(posts).map( id => posts[id])

我想过让 getPostsEntities 直接返回数组，但我在理解最佳实践时遇到了一些问题

解决方法

正如@HMR 所提到的，您可以在另一个内部使用一个重新选择选择器。所以 getPublicPosts 可以基于 getPosts 的记忆结果。您也可以使用 Object.values() 代替 Object.keys()。

const getPostsEntities = (state: State) => state.posts;
 
export const getPosts = createSelector(
    [ getPostsEntities ],(posts) => Object.values(posts)
);

export const getPublicPosts = createSelector(
    [ getPosts ],(posts) => posts.filter(post => post.isPublic)
);