useStores-基于 useContext 对 Mobx 进行封装并全局管理 React 状态

前言

在理解状态管理的概念以前，你必须认识到什么是状态。在 React 中，状态就是你的应用程序的数据层。当谈到 React 和帮助它管理状态的库时，你能够说状态是一个包含你的应用程序正在处理的数据的对象。例如，若是你想在你的应用程序上显示一个项目列表，则状态将包含你打算要显示的项目。状态会影响 React 组件的行为和渲染方式。是的！仅此而已，就这么简单。

所以，状态管理意味着监控和管理您的应用的数据（即状态）。几乎全部的应用程序都有这样或那样的状态，所以，管理状态已成为当今构建任何现代应用程序的最重要部分之一。

当你考虑 React 应用中的状态管理时，基本上有三种选择：

• Redux
• React Context API
• MobX

Mobx

我工做中使用 Mobx 做为 React 应用的状态管理库，Mobx 不单单适用于 React，它也能够与其余为 Web 应用程序提供动力的 JavaScript 库和框架一块儿使用。本章将封装一个全局管理 React 应用状态的自定义钩子函数。

• 仓库地址，基于create-react-app建立，建立过程及相关依赖以下：
  1. npx create-react-app react-use-mobx --template typescript
  2. npm i mobx mobx-react axios

封装过程

stores、context、hooks 这三个文件夹根目录下暴露一个 index.ts 的入口文件，经过此入口将相关函数进行导出

1. 假设应用有两个须要进行管理的商店 CounterStore 与ThemeStore，新建 src/stores/文件夹

   经过使用 makeAutoObservable 这个 Mobx 提供的 API 将相关属性进行包装，返回一个可观察的对象。

   • src/stores/CounterStore/index.ts

     import { makeAutoObservable } from 'mobx';
     
     export default function CounterStore() {
       return makeAutoObservable({
         count: 0,
         increment() {
           this.count++;
         },
         decrement() {
           this.count--;
         },
         get doubleCount() {
           return this.count * 2;
         },
       });
     }
     复制代码

   • src/stores/ThemeStore/index.ts

     import { makeAutoObservable } from 'mobx';
     
     type ThemeStyle = 'light' | 'dark';
     
     export default function ThemeStore() {
       return makeAutoObservable({
         theme: 'light',
         setTheme(newTheme: ThemeStyle) {
           this.theme = newTheme;
         },
       });
     }
     复制代码

2. 使用React.createContext建立一个storesContext，新建src/contexts/文件夹

   • src/contexts/storesContext/index.tsx

     import React from 'react';
     import { CounterStore, ThemeStore } from '../../stores';
     
     const storesContext = React.createContext({
       counterStore: CounterStore(),
       themeStore: ThemeStore(),
     });
     
     export default storesContext;
     复制代码

3. 编写一个自定义钩子函数useStores来访问导出的storesContext上下文对象，新建src/hooks文件夹

   • src/hooks/useStores/index.ts

     import React from 'react';
     import { storesContext } from '../../contexts';
     
     const useStores = () => React.useContext(storesContext);
     
     export default useStores;
     复制代码

4. 前三步完成了 store 的编写，将其添加为上下文对象的属性，最后编写自定义钩子函数将上下文对象进行导出。如今咱们已经准备好开始消费和使用咱们的 store 数据了，新建src/components文件夹

   • src/components/Counter/index.tsx

     import React from 'react';
     import { observer } from 'mobx-react';
     import { useStores } from '../../hooks';
     
     const Counter: React.FC = () => {
       const { counterStore } = useStores();
     
       return (
         <> <div>{counterStore.count}</div> <button onClick={() => counterStore.increment()}>++</button> <button onClick={() => counterStore.decrement()}>--</button> </>
       );
     };
     
     export default observer(Counter);
     复制代码

   • src/components/ThemeToggler/index.tsx

     import { observer } from 'mobx-react';
     import { useStores } from '../../hooks';
     
     const ThemeToggler = () => {
       const { themeStore } = useStores();
     
       return (
         <> <div>{themeStore.theme}</div> <button onClick={() => themeStore.setTheme('light')}>白天</button> <button onClick={() => themeStore.setTheme('dark')}>黑夜</button> </>
       );
     };
     export default observer(ThemeToggler);
     复制代码

   在组件中引入自定义钩子函数，并经过解构赋值的方式将组件须要使用到的 store 进行声明，这样就能够在组件内须要的地方消费 store 提供的数据了。

5. 最后将组件进行挂载

   src/App.tsx

   import React from 'react';
   import Counter from './components/Counter';
   import ThemeToggler from './components/ThemeToggler';
   
   function App() {
     return (
       <div className="App"> <main> <Counter /> <ThemeToggler /> </main> </div>
     );
   }
   
   export default App;
   复制代码

   经过执行npm run start打开的localhost:3000端口，能够看到数据成功展现，此时点击 count 加减按钮能够修改数据的状态，点击主题切换按钮也能够正确的切换主题。

   至此，经过React.useContext这个 API 与 Mobx 的结合，咱们成功将 Mobx 的商店数据进行封装，而且能够在组件中消费这些数据。

总结

文章主要介绍了怎么在 React 应用中使用 Mobx 进行状态管理，你能够根据文中的配置步骤，搭建一个集成了 Mobx 的 React App、形象化的理解 Mobx 中重要的概念 (观察者模式)，在 React 上的状态管理方面，MobX 可能没有 Redux 那么受欢迎，但它很是成熟，易于上手，并提供了一种无缝集成到新的或现有应用程序中的方法。