Redux を使用したデータ管理: コンテンツと ID をスライスに保存する

Redux は、JavaScript アプリケーション、特に React などのフレームワークで構築されたアプリケーションの人気のある状態管理ライブラリです。 Redux の中核となる概念の 1 つは、アプリケーションの状態を保持する集中ストアという考え方です。この記事では、スライスを使用してコンテンツ ストレージをリスト管理から分離することで、Redux を使用してデータを効果的に管理する方法について説明します。

Redux スライスを理解する

Redux では、スライスはアプリケーションの特定の機能またはドメインに対するリデューサー ロジックとアクションのコレクションです。スライスを使用すると、状態を論理的に整理できるため、アプリケーションの管理と拡張が容易になります。たとえば、アプリケーション内のユーザー データ、投稿、コメント、その他のエンティティに対して個別のスライスを作成できます。

コンセプトの概要

Redux では、スライスは状態を効果的に構造化するのに役立ちます。ブログ アプリケーションを管理する場合、投稿コンテンツのストレージを投稿 ID のリストから分離できます。この分離により、データの効率的なレンダリングと更新が可能になります。

国家を構築する

投稿のコンテンツとこれらの投稿を参照するリストの両方を効果的に管理するために、Redux の状態を 2 つの部分に構造化できます。

1. 投稿スライス: このスライスには投稿の実際のコンテンツが保存されます。
2. ID スライス: このスライスは投稿の 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 中国語 Web サイトの他の関連記事を参照してください。