介绍

构建大型网络应用程序可能很棘手，尤其是当您有大量不同的信息需要跟踪时。但别担心，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/