redux 是一个流行的 javascript 应用程序状态管理库，特别是那些使用 react 等框架构建的应用程序。 redux 的核心概念之一是保存应用程序状态的集中式存储的想法。本文探讨了如何通过使用切片将内容存储与列表管理分离，从而使用 redux 有效管理数据。
了解 redux 切片
在 redux 中，切片是针对应用程序的特定功能或域的减速器逻辑和操作的集合。使用切片有助于逻辑地组织您的状态，从而更轻松地管理和扩展您的应用程序。例如，您可以为用户数据、帖子、评论和应用程序中的任何其他实体设置单独的切片。
概念概述
在 redux 中，切片有助于有效地构建状态。管理博客应用程序时，您可以将帖子内容存储与帖子 id 列表分开。这种分离可以实现数据的高效渲染和更新。
构建你的国家
为了有效管理您的帖子内容以及引用这些帖子的列表，我们可以将 redux 状态分为两部分：
- 帖子切片：此切片将存储您帖子的实际内容。
- ids 切片：该切片将管理帖子的 id，可用于各种列表，例如所有帖子和最近的帖子。
国家结构
管理帖子的简单结构：
{
"posts": {
"byid": {
"1": { "id": "1", "title": "first post", "content": "this is the first post." },
"2": { "id": "2", "title": "second post", "content": "this is the second post." }
},
"allids": ["1", "2"],
"recentids": ["2"]
}
}
在此示例中，帖子切片包含：
- byid：将帖子 id 映射到其各自内容的对象。
- allids：包含所有帖子 id 的数组，可用于呈现“所有帖子”页面。
- recentids：包含最近帖子 id 的数组，对于“最近帖子”块很有用。
切片设置
创建一个切片来管理帖子：
import { createslice } from '@reduxjs/toolkit';
const postsslice = createslice({
name: 'posts',
initialstate: { byid: {}, allids: [], recentids: [] },
reducers: {
addpost: (state, { payload }) => {
state.byid[payload.id] = payload;
state.allids.push(payload.id);
state.recentids.push(payload.id);
},
removepost: (state, { payload }) => {
delete state.byid[payload];
state.allids = state.allids.filter(id => id !== payload);
state.recentids = state.recentids.filter(id => id !== payload);
}
}
});
访问数据
检索组件中的帖子：
const allPosts = useSelector(state => state.posts.allIds.map(id => state.posts.byId[id])); const recentPosts = useSelector(state => state.posts.recentIds.map(id => state.posts.byId[id]));
这种方法的好处
- 关注点分离：将内容和 id 列表分开有助于更有效地管理数据，尤其是在应用程序扩展时。
- 效率：通过单独管理 id，您可以轻松更新或渲染列表，而无需操作整个数据集。
- 灵活性：您只需更改列表中的 id，即可轻松修改数据的显示方式，而无需更改底层内容。
这种方法允许您将内容存储和 id 管理分开，从而更轻松地使用 redux 维护和访问应用程序的状态。
