介紹

建立大型網路應用程式可能很棘手，尤其是當您有大量不同的資訊需要追蹤時。但別擔心，RxJS 可以為您提供協助！它就像一個非常酷的工具，可以幫助您在一個地方管理所有數據。

使用 RxJS，您可以創建應用程式的不同部分可以使用的稱為「資料流」的東西。它就像一條大河流經您的應用程序，使所有內容保持連接和同步。

在本文中，我們將向您展示如何使用 RxJS 建立真正易於管理且運作良好的 Web 應用程式。在本文結束時，您將了解如何使用 RxJS 來管理所有資料並建立更大更好的 Web 應用程式！

為什麼要使用 RxJS 進行狀態管理？

嘿，當您建立大型網頁應用程式並且需要追蹤大量不同的資訊時，您是否曾經感到困惑？這就是 RxJS 的用武之地！它就像一個非常酷的庫，可以幫助您在一個地方管理所有資料。

使用 RxJS，您可以建立應用程式不同部分可以使用的資料流。這有點像一條河流流經您的應用程序，使所有內容保持連接和同步。

RxJS 還可以幫助您將應用程式分解為更小的部分，就像在您的房子裡有不同的房間來放置不同的東西一樣。這樣，就可以更輕鬆地讓一切井井有條並找到您需要的內容。

整體而言，RxJS 是管理大型 Web 應用程式中資料的絕佳工具。無論您是建立一個簡單的應用程式還是一個非常大的應用程序，RxJS 都可以幫助您控制一切！

待辦事項清單範例

應用新技術或新概念證明的最簡單方法是列出待辦事項清單。

商店：

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 管理待辦事項清單。該商店是使用主題實現的，並提供添加、刪除和完成任務的方法。

init 函數透過使用 subject.next(state) 將目前狀態發佈到主題來初始化儲存。通常在首次載入應用程式時呼叫此函數，以確保商店是最新的。

訂閱功能允許元件訂閱儲存中的變更。當 store 更新時，傳遞給 subscribe 的 setState 函數將使用更新後的狀態被呼叫。此函數通常由需要顯示商店目前狀態的元件使用。

總的來說，init 和 subscribe 是此程式碼中的兩個重要函數，使開發人員能夠使用 RxJS 管理待辦事項清單的狀態。

用法：

實現這種狀態管理很容易，最高層級做這個就可以了：

const [tasks, setTasks] = useState([]);

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

此程式碼使用 React hooks 來訂閱並初始化一個使用 RxJS 管理待辦事項清單的商店。

useState 掛鉤會建立一個名為tasks 的狀態變數和一個名為setTasks 的函式來更新該狀態。傳遞給 useState 的 [] 參數將任務的初始值設為空數組。

useEffect鉤子用於訂閱和初始化todoStore。 todoStore.subscribe(setTasks) 行將 setTasks 函數訂閱到儲存中的變更。這意味著每當商店更新時，都會使用更新後的狀態呼叫 setTasks，任務也會隨之更新。

todoStore.init() 函數透過使用 subject.next(state) 將目前狀態發佈到主題來初始化儲存。

結論

就是這樣了！我們學習如何使用 RxJS 和 React 建立待辦事項清單應用程式。我們使用 RxJS 來管理應用程式的狀態，並使用 React 向使用者顯示當前狀態。

我們看到了 RxJS 如何提供一組強大的工具來管理狀態，包括可觀察量、運算子和主題。我們也學習如何使用像 useState 和 useEffect 這樣的 React hooks 來即時更新應用程式狀態。

透過結合 RxJS 和 React，我們建立了一個很酷的應用程序，易於使用和維護。我們學到了一些非常有價值的技能，我們可以用它們在未來建立更令人驚嘆的 Web 應用程式！

如果您覺得這篇文章太晦澀，請查看這些：

• 原始碼：https://github.com/starneit/rxjs-state-poc
• 示範：https://rxjs-poc.web.app/