如何使用 redux reselect 避免冗余

Question

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

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

我正在使用组件中的重新选择获取状态，并且为此创建了 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 return 数组，但我在理解什么是最佳实践时遇到了一些问题

Answer 1

如@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)
);

如何使用 redux reselect 避免冗余

How to use redux reselect avoiding redundancy

reactjs

react-redux

reselect