如何解决使用 createEntityAdapter 时,每个 React 组件都应该有自己的切片吗?
我将 Redux-tokit 的 createSlice
和 createEntityAdapter
与规范化数据一起使用。
通常,在使用 createEntityAdapter
之前,我会:
- 在
postsSlice
中获取、规范化和存储数据 所以我的 postSlicestate
看起来像这样:blogPosts: {entities: {posts: {},users:{},comments: {}},ids:[]}
- 从
id
的状态获取postsSlice
到Posts
组件 - 将评论/用户
id
从Posts
传递给子组件 -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:[]}
是否应该每个组件(Posts
、User
、Comment
)都有自己的切片/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 举报,一经查实,本站将立刻删除。