useStores-基於 useContext 對 Mobx 進行封裝並全局管理 React 狀態

前言

在理解狀態管理的概念以前，你必須認識到什麼是狀態。在 React 中，狀態就是你的應用程序的數據層。當談到 React 和幫助它管理狀態的庫時，你能夠說狀態是一個包含你的應用程序正在處理的數據的對象。例如，若是你想在你的應用程序上顯示一個項目列表，則狀態將包含你打算要顯示的項目。狀態會影響 React 組件的行爲和渲染方式。是的！僅此而已，就這麼簡單。html

所以，狀態管理意味着監控和管理您的應用的數據（即狀態）。幾乎全部的應用程序都有這樣或那樣的狀態，所以，管理狀態已成爲當今構建任何現代應用程序的最重要部分之一。react

當你考慮 React 應用中的狀態管理時，基本上有三種選擇：ios

Mobx

我工做中使用 Mobx 做爲 React 應用的狀態管理庫，Mobx 不單單適用於 React，它也能夠與其餘爲 Web 應用程序提供動力的 JavaScript 庫和框架一塊兒使用。本章將封裝一個全局管理 React 應用狀態的自定義鉤子函數。git

倉庫地址，基於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 的入口文件，經過此入口將相關函數進行導出github

假設應用有兩個須要進行管理的商店 CounterStore 與ThemeStore，新建 src/stores/文件夾typescript

經過使用 makeAutoObservable 這個 Mobx 提供的 API 將相關屬性進行包裝，返回一個可觀察的對象。npm

src/stores/CounterStore/index.tsredux

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.tsaxios

import { makeAutoObservable } from 'mobx';

type ThemeStyle = 'light' | 'dark';

export default function ThemeStore() {
  return makeAutoObservable({
    theme: 'light',
    setTheme(newTheme: ThemeStyle) {
      this.theme = newTheme;
    },
  });
}
複製代碼

使用React.createContext建立一個storesContext，新建src/contexts/文件夾markdown

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;
複製代碼

編寫一個自定義鉤子函數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;
複製代碼

前三步完成了 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 提供的數據了。

最後將組件進行掛載

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 那麼受歡迎，但它很是成熟，易於上手，並提供了一種無縫集成到新的或現有應用程序中的方法。