使用 Redux 管理資料：在切片中儲存內容和 ID

Redux 是一個流行的 JavaScript 應用程式狀態管理函式庫，特別是那些使用 React 等框架建立的應用程式。 Redux 的核心概念之一是保存應用程式狀態的集中式儲存的想法。本文探討如何透過使用切片將內容儲存與清單管理分離，從而使用 Redux 有效管理資料。

了解 Redux 切片

在 Redux 中，切片是針對應用程式的特定功能或領域的減速器邏輯和操作的集合。使用切片有助於邏輯地組織您的狀態，從而更輕鬆地管理和擴展您的應用程式。例如，您可以為使用者資料、貼文、評論和應用程式中的任何其他實體設定單獨的切片。

概念概述

在 Redux 中，切片有助於有效地建構狀態。管理部落格應用程式時，您可以將貼文內容儲存與貼文 ID 清單分開。這種分離可以實現資料的高效渲染和更新。

建構你的國家

為了有效管理您的貼文內容以及引用這些貼文的列表，我們可以將 Redux 狀態分為兩部分：

1. 貼文切片：此切片將儲存您貼文的實際內容。
2. 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 維護和存取應用程式的狀態。

以上是使用 Redux 管理資料：在切片中儲存內容和 ID的詳細內容。更多資訊請關注PHP中文網其他相關文章！