使用 MobX State Tree 整合

備註

本指南尚未完成。請協助送出 pull requests 來改善本指南。

此指南探索了在使用 MobX State Tree (MST) 來管理狀態的 React Native 專案中使用 React Navigation 的可能方式。本指南搭配一個 範例應用程式。本指南的部分內容可能也與 MobX 使用者有關，但請注意一個事實，MobX 沒有內建的序列化（反序列化）其狀態的解決方案。

備註

請注意，在此指南中，Mobx State Tree 未用來管理導覽狀態本身，只管理導覽參數！

概述

此指南的目標是使用 MST 和 React Navigation 並達成最佳開發人員體驗。在此指南的範圍中，這表示允許我們執行完整的 JS 重新載入，並返回到重新載入前發生的狀態。

我們將使用 React Navigation 的 內建機制 來儲存 導覽狀態。我們也需要儲存應用程式狀態和導覽參數，如此一來，當您在應用程式的畫面中執行完整的 JS 重新載入時，您將會返回到相同的畫面，並在畫面中具有相同的資料。

指南

首先，先建立初始化的導覽結構和 React 元件。完成後，繼續使用 MST 來建立狀態模型。如果您想進一步深入瞭解，請查看 egghead.io 課程。

在這個階段，您可能會想知道如何將 MST 物件與元件連接。答案在 mobx-react 套件 中，其中包含 MobX 的 React 繫結（它們也適用於 MST）。您可能會使用 Provider 元件、inject 和 observer 函數。

使用 Provider 封裝您從根元件的 render 方法回傳的項目

<Provider myObject={this.myObject}>
  <NavigationContainer>{/* Screen configuration */}</NavigationContainer>
</Provider>

如此一來，您便可以透過 inject 函數從應用程式中的任何 React 元件存取 myObject，這非常有用。

使用 observer 函數封裝所有用來呈現 observable 資料的元件。當呈現的資料變更時，這會確保元件重新呈現。

導覽參數

應用程式中的畫面通常取決於參數。React Navigation 讓您可以將參數從一個畫面傳送至另一個畫面。這些參數儲存在導覽狀態中。但是，要讓導覽狀態持續存在，它必須是可序列化的。這個需求與 MST 並不相容，原因在於 MST 物件是複雜的物件，而 React Navigation 不知道如何（取消）序列化它們。在此指南中，我們將透過自己儲存導覽參數來解決這個問題。

這表示我們並不會從一個畫面傳送參數至另一個畫面（例如透過 props.navigation.navigate('MyScreen', { complexMSTObject })），而是將參數儲存在導覽儲存區中，然後在不傳送任何參數的情況下執行導覽，我們會在目標畫面從導覽儲存區中挑選參數。

舉例來說，導覽儲存區可能類似於以下範例

import { types, onSnapshot, getRoot } from 'mobx-state-tree';
import { Product } from '../models/Product';
import { User } from '../models/User';

export const NavigationStore = types
  .model('NavigationStore', {
    productDetailScreenParams: types.map(
      types.model('ProductDetailScreenParams', {
        product: types.optional(types.safeReference(Product)),
      })
    ),
    userProfileScreenParams: types.model('UserProfileScreenParams', {
      user: types.maybe(types.safeReference(User)),
    }),
  })
  .actions(self => ({
    ...
  }));

請注意，userProfileScreenParams 是具有 user 輸入項目的簡單模型，而 productDetailScreenParams 是 ProductDetailScreenParams 模型的對應。我們選擇這種資料的結構是因為我們的應用程式只有一個使用者個人檔案畫面，它會從 userProfileScreenParams 讀取其參數。productDetailScreenParams 是對應，因為應用程式可以在堆疊中有多個產品畫面。每個畫面都會指向對應中儲存的 Product 執行個體。進入對應的鍵是 React Navigation 的鍵：將 鍵視為路由的識別碼。

您的導覽儲存區也可能只是一個對應，在其中我們會針對每個畫面（不論是產品還是使用者個人檔案畫面）儲存其導覽參數。這是範例應用程式採取的方法。

摘要

• 您可以在 React Native 應用程式中使用 MobX State Tree 與 React Navigation
• 使用 Provider 元件以及 inject和 observer 函式將 MobX 或 MST 與 React 結合
• 可以讓整個應用程式狀態持續存在，並在 JS 重新載入時將其還原