微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

使用 createEntityAdapter 时,每个 React 组件都应该有自己的切片吗?

如何解决使用 createEntityAdapter 时,每个 React 组件都应该有自己的切片吗?

我将 Redux-tokit 的 createSlicecreateEntityAdapter 与规范化数据一起使用。

这是一个典型的博客应用(帖子、评论用户) - 实体

通常,在使用 createEntityAdapter 之前,我会:

  1. postsSlice
    获取、规范化和存储数据 所以我的 postSlice state 看起来像这样:
    blogPosts: {entities: {posts: {},users:{},comments: {}},ids:[]}
  2. id 的状态获取 postsSlicePosts 组件
  3. 评论/用户 idPosts 传递给子组件 - Comment User 组件,他们将使用传递的 id 获取数据选择器连接到父级的 postSlice 状态
const postsAdapter = createEntityAdapter();

const postsSlice = createSlice({
  name: "posts",initialState: postsAdapter.getinitialState(),reducers: {
    setPosts: (state,{ payload }) =>
      postsAdapter.setAll(state,payload.entities.posts),},});

问题在于:

  • 使用createEntityAdapter
    由于我们使用了 createEntityAdapter.getinitialState(),因此我们在每个切片中都获得了相同的 initialState {entities: {} ids: []} 模式。
  • 而且这不允许像我以前那样有初始状态:
    blogPosts: {entities: {posts: {},ids:[]}

是否应该每个组件(PostsUserComment)都有自己的切片/reducer,并从同一端点使用 thunk 获取自己的数据?

这样: (根据 createEntityAdapter.getinitialState() 模式)

  • postSlice 状态将只包含帖子实体 - entities: {posts: {},ids:[]}
  • commentSlice 状态 - 评论实体 - entities: {comments: {},ids:[]}
  • 等等...

解决方法

没有。 组件和 Redux 状态结构之间从来没有 1:1 的关联。相反,您应该organize your state in terms of your data types and update logic,并且组件应该根据自己的需要访问和重构该数据。

请注意, multiple ways to approach structuring that data in the store even if it's being normalized。例如,您可以将每种数据类型作为其自己的顶级切片,或者具有一个共享的 entities 化简器,其中每种类型都嵌套在其中。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。