时间戳

首页 > 解决方案 > 如何使用 redux reselect 避免冗余

reactjs - 如何使用 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直接返回数组，但我在理解什么是最佳实践时遇到了一些问题

标签： reactjsreact-reduxreselect

解决方案

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

推荐阅读