react揚帆起航之狀態管理(mobx)

本文信息

• 本文建立於2018/03/07
• 2018/03/20 更新 -- 統一管理store

mobx簡介與使用

一直以來，redux是react事實上的狀態管理工具，直到mobx橫空出世。今後，多了一個選擇。關於mobx與redux的異同，網上有不少文章介紹，本文中再也不敘述了。本文主要介紹react與mobx搭配使用，固然，有時間我也許會寫一個react與redux搭配使用的示例教程。

做爲一個功能強大的狀態管理工具，mobx上手確是十分簡單。咱們知道，redux強調單一數據來源，即單一store。然而，在大型應用時，單一store每每帶來管理不便的問題。相對而言，mobx並不推崇單一store。咱們能夠對每個路由組件構建一個store。固然，也能夠構建一個全局的store，服務於全部組件。全局store與局部store是能夠徹底搭配使用的。

本文以局部store爲例說明:

// Home/Store.tsx
import { observable, action } from 'mobx';

class Store {

  // 定義數據
  @observable title: string = '';

  // 改變數據
  @action loadTitle = () => {
    this.title = 'Welcome to home page !';
  }

  // 實例化
  static init() {
    return new Store();
  }
}

export default Store;

// Home/Home.tsx
import * as React from 'react';
import { observer } from 'mobx-react';
import Store from './Store';

@observer
class Home extends React.Component<{}, {}> {

  store: any;

  componentDidMount(): void {
    this.store = Store.init();
    const { loadTitle } = this.store;
    loadTitle();
  }

  render() {
    const { title } = this.store;
    return (<p>{title}</p >);
  }

}

export default Home;

統一管理store

隨着應用的增大，若是在每一個組件目錄下創建對應的store，不免難以維護。所以，統一管理store是一個較好的選擇。

在根目錄下簡歷stores目錄，做爲存放store的倉庫，全部的store都放在這裏。

在入口文件index.tsx:

// index.tsx
...
import { Provider } from 'mobx-react';
import rootStore from './stores/RootStore';
import homeStore from './stores/HomeStore';
...

const stores = {
  rootStore,
  homeStore
};

ReactDOM.render(
  <Provider {...stores}>
    <Router basename={process.env.PUBLIC_URL}>
      <App />
    </Router>
  </Provider>,
  document.getElementById('root') as HTMLElement
);

在須要使用到store的組件:

// /Home/index.tsx
...
import { observer, inject } from 'mobx-react';
import { HomeStore } from '../stores/HomeStore';
import { RootStore } from '../stores/RootStore';
...

interface Props {
  homeStore: HomeStore;
  rootStore: RootStore;
}

@inject('rootStore')
@inject('homeStore')
@observer
class HomeComponent extends React.Component<Props, {}> {
  ...
  render() {
    return (
      <div>
        <h1 className={styles.title}>{this.props.homeStore.title}</h1>
        <p>{this.props.rootStore.title}</p>
      </div>
    );
  }
}

這樣，就完成了mobx與react的搭配使用。固然，這只是最初級的用法。mobx還有更多強大功能，想進一步瞭解的，能夠去mobx官網查看它的文檔。本文旨在介紹mobx結合react的基本用法，不作過多深刻。固然，若是服務端渲染時，如何再搭配mobx，則會複雜一些。這個，我會在後面的服務端渲染的文章中提到。

至此，狀態管理(mobx)的內容完畢。

---

react揚帆啓航專欄分享的時我我的學習與實踐react過程當中的一些歷程，但願藉此專欄與你們共同探討react相關的技術，以求進步。