導入

大規模な 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([]);

  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/