RxJS と React による状態管理

導入

大規模な Web アプリの構築は、特に追跡すべきさまざまな情報が多数ある場合には、難しい場合があります。でも心配しないでください。RxJS がお手伝いします。これは、すべてのデータを 1 か所で管理できる非常に優れたツールのようなものです。

RxJS を使用すると、アプリのさまざまな部分で使用できる「データ ストリーム」と呼ばれるものを作成できます。アプリ内を流れる大きな川のようなもので、すべての接続と同期が保たれます。

この記事では、RxJS を使用して、管理が非常に簡単で優れた機能を備えた Web アプリを構築する方法を説明します。この記事を最後まで読むと、RxJS を使用してすべてのデータを管理し、より大規模で優れた Web アプリを構築する方法がわかるでしょう!

状態管理に RxJS を使用する理由

大規模な Web アプリを構築しているときに、管理すべきさまざまな情報がたくさんあって混乱することはありませんか?そこで RxJS が登場します。これは、すべてのデータを 1 か所で管理するのに役立つ、非常に優れたライブラリのようなものです。

RxJS を使用すると、アプリのさまざまな部分で使用できるデータのストリームを作成できます。これはアプリ内を流れる川のようなもので、すべての接続と同期が維持されます。

RxJS は、アプリを小さな部分に分割するのにも役立ちます。これは、家の中にさまざまなものを入れるための別の部屋があるようなものです。そうすれば、すべてを整理して必要なものを見つけるのが簡単になります。

全体として、RxJS は大規模な Web アプリのデータを管理するための優れたツールです。単純なアプリを構築している場合でも、非常に大規模なアプリを構築している場合でも、RxJS はすべてを管理するのに役立ちます!

To Do リストの例

新しいテクノロジーや新しい概念実証を適用する最も簡単な方法は、ToDo リストを作成することです。

ストア:

const subject = new Subject();

const initialState: Task[] = [];

let state = initialState;

export const todoStore = {
  init: () => {
    subject.next(state);
  },
  subscribe: (setState: any) => {
    subject.subscribe(setState);
  },
  addTask: (content: string) => {
    const task = {
      content,
      id: uid(),
      isDone: false,
    };
    state = [...state, task];
    subject.next(state);
  },
  removeTask: (id: string) => {
    const tasks = state.filter((task) => task.id !== id);
    state = tasks;
    subject.next(state);
  },
  completeTask: (id: string) => {
    const tasks = state.map((task) => {
      if (task.id === id) {
        task.isDone = !task.isDone;
      }
      return task;
    });
    state = tasks;
    subject.next(state);
  },
  initialState,
};

このコードは、RxJS を使用して ToDo リストを管理するための単純なストアを定義します。ストアはサブジェクトを使用して実装され、タスクを追加、削除、完了するためのメソッドを提供します。

init 関数は、subject.next(state) を使用して現在の状態をサブジェクトに公開することでストアを初期化します。この関数は通常、ストアが最新であることを確認するために、アプリが最初に読み込まれるときに呼び出されます。

サブスクライブ機能を使用すると、コンポーネントはストア内の変更をサブスクライブできます。ストアが更新されると、subscribe に渡された setState 関数が更新された状態で呼び出されます。この関数は通常、ストアの現在の状態を表示する必要があるコンポーネントによって使用されます。

全体として、init と subscribe は、開発者が RxJS を使用して ToDo リストの状態を管理できるようにする、このコードの 2 つの重要な機能です。

使用法：

この種の状態管理を実装するのは非常に簡単です。これを最上位レベルで実行するだけです。

const [tasks, setTasks] = useState<Task[]>([]);

  useEffect(() => {
    todoStore.subscribe(setTasks);
    todoStore.init();
  });

このコードは、React フックを使用して、RxJS を使用して ToDo リストを管理するストアをサブスクライブし、初期化します。

useState フックは、tasks という名前の状態変数と、その状態を更新するための setTasks という名前の関数を作成します。 useState に渡される [] 引数は、タスクの初期値を空の配列に設定します。

useEffect フックは、todoStore のサブスクライブと初期化に使用されます。 todoStore.subscribe(setTasks) 行は、ストア内の変更に対して setTasks 関数をサブスクライブします。これは、ストアが更新されるたびに、更新された状態で setTasks が呼び出され、それに応じてタスクが更新されることを意味します。

todoStore.init() 関数は、subject.next(state) を使用して現在の状態をサブジェクトに公開することでストアを初期化します。

結論

それで終わりです！ RxJS と React を使用して ToDo リスト アプリケーションを構築する方法を学びました。 RxJS を使用してアプリケーションの状態を管理し、React を使用して現在の状態をユーザーに表示しました。

RxJS が、オブザーバブル、演算子、サブジェクトなどの状態を管理するための強力なツール セットをどのように提供するのかを見てきました。また、useState や useEffect などの React フックを使用してアプリケーションの状態をリアルタイムで更新する方法も学びました。

RxJS と React を一緒に使用することで、使いやすく保守しやすいクールなアプリを構築しました。そして、私たちは将来さらに素晴らしい Web アプリケーションを構築するために使用できる、非常に貴重なスキルをいくつか学びました!

この記事がわかりにくいと思われる場合は、以下を確認してください:

• ソースコード: https://github.com/starneit/rxjs-state-poc
• デモ: https://rxjs-poc.web.app/

以上がRxJS と React による状態管理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。