使用 Redux 管理数据：在切片中存储内容和 ID-js教程-PHP中文网

使用 Redux 管理数据：在切片中存储内容和 ID

Linda Hamilton

发布： 2024-10-26 20:33:29

原创

1091 人浏览过

Managing Data with Redux: Storing Content and IDs in Slices

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]));

登录后复制