[MobX State Tree數據組件化開發][2]：實例-TodoList

時間 2019-11-15

標籤 mobx state tree 數據組件開發實例 todolist 简体版

原文原文鏈接

👉系列文章目錄👈

上一篇文章MST基礎中簡單地介紹了MST的幾個基本概念和相關API，本文將帶你們搭配React實現一個TodoList。css

準備工做

爲了省去枯燥的項目搭建過程，本文選擇使用stackblitz平臺來編輯咱們的代碼。react

TS+React+MST Starter性能優化

同窗們能夠點擊上面的地址fork一個starter項目，項目中已經配置好MST以及React相關的依賴，而且包含了一個簡單的Counter demo，後面將在這個starter的基礎上進行開發。mvc

項目結構&規範說明

從上面的地址進入後，你會獲得一個包含如下目錄結構的初始項目。less

其中，目錄components用於存放React組件，目錄models用於存放MST Model。dom

整個應用的Root Model在models/index.ts文件中定義：ide

import { types } from 'mobx-state-tree';
import { Counter } from './Counter';

export const Root = types
  .model('Root', {
    counter: types.optional(Counter, {}),
  });
複製代碼

定義好的Root Model會在項目的入口index.tsx文件中被引入，並建立實例對象，而後使用mobx-react提供的Provider組件將Root Model的實例對象傳遞到應用的Context中：post

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'mobx-react';
import { Root } from './models';
import { ModelInjector } from './components/ModelInjector';
import './style.css';

import { Counter } from './components/Counter';

const root = Root.create({});

const ConnectedCounter = () => (
  <ModelInjector>
    {(root) => <Counter model={root.counter}/>}
  </ModelInjector>
);

function App () {
  return (
    <Provider root={root}>
      <ConnectedCounter/>
    </Provider>
  );
}

render(<App />, document.getElementById('root'));
複製代碼

項目提供了一個名爲ModelInjector的組件，index.tsx代碼中，使用ModelInjector組件對Counter組件進行了一個包裝，將root.counter這個節點Model做爲props傳給了Counter組件。在本文以及後續的文章中，將會沿用這樣的方式在組件與Model之間創建鏈接。性能

這樣作的好處是，可讓TypeScript的靜態類型約束覆蓋到整個應用，開發過程當中能夠享受到類型帶來的便利：優化

ModelInjector組件的實現比較簡單，能夠在項目中自行查看。

肯定目標

在開始動手編碼以前，必須明確要作的這個東西是什麼樣的。

咱們要作的這款TodoList你們應該比較熟悉：

這款TodoList來自TodoMVC。

因爲本文的主題不在UI的實現上，咱們能夠複用他的DOM結構和CSS，這會省去很多功夫。

定義Model

明確要作什麼以後，就能夠着手開始分析這個應用的狀態結構了。

TodoItem

從最基礎的開始。TodoList的基本單位就是TodoItem，TodoItem具有的屬性是他的id（用於編輯、刪除時進行跟蹤）、title，以及是否完成的標識done，因此能夠得出：

// models/TodoItem.ts
import { types, Instance } from 'mobx-state-tree';

export const TodoItem = types
  .model('TodoItem', {
    id: types.string,
    title: types.string,
    done: types.boolean,
  })
  .actions(self => ({
    switchDone(done?: boolean) {
      if (typeof done === 'boolean') {
        self.done = done;
      } else {
        self.done = !self.done;
      }
    }
  }));

export type TodoItemInstance = Instance<typeof TodoItem>;
複製代碼

新建models/TodoItem.ts文件，寫入上面的代碼。

細心的同窗會發現，上面代碼中還export了一個type定義TodoItemInstance。這個type表示的是TodoItem這個Model的實例類型，能夠在定義React組件的props類型時使用。

TodoForm

應用還須要一個輸入框，在新增的時候輸入新TodoItem的title；以及一個可隱藏的輸入框用來編輯已有TodoItem的title。

這兩個輸入框的功能類似，都是維護輸入框的值並處理值的更新。不一樣的是編輯輸入框會與某一個TodoItem關聯，而新增輸入框沒有關聯對象。

可使用一個TodoForm的Model來維護兩個輸入框的狀態：

// models/TodoForm.ts
import { types, Instance } from 'mobx-state-tree';
import { TodoItemInstance } from './TodoItem';

export const TodoForm = types
  .model('TodoForm', {
    value: types.optional(types.string, ''),
    targetTodoId: types.optional(types.maybeNull(types.string), null),
  })
  .views(self => ({
    get trimedValue () {
      return self.value.trim();
    },
    get valid() {
      return this.trimedValue.length > 0;
    }
  }))
  .actions(self => ({
    setTarget(target: TodoItemInstance) {
      self.value = target.title;
      self.targetTodoId = target.id;
    },
    update(value: string) {
      self.value = value;
    },
    reset() {
      self.value = '';
      self.targetTodoId = null;
    }
  }));

export type TodoFormInstance = Instance<typeof TodoForm>;
複製代碼

TodoForm中，使用value維護輸入框的值，targetTodoId表示當前關聯的TodoItem的id。並提供了用於關聯TodoItem的setTarget方法，更新值的update方法以及重置狀態的reset方法。

這裏使用了types.optional爲狀態設置了初始值。

另外還提供了兩個計算值：trimedValue以及valid。

這裏須要注意的是，在valid的定義中，trimedValue引用的是this而不是self，這是因爲valid以及trimedValue二者的定義寫在同一個views方法中，在views方法結束前，TypeScript的類型系統並不能觀察到self對應的類型中包含valid或者trimedValue，因此須要使用this來代替self。

除了views以外，actions或者volatile也須要注意上面這個問題。

TodoList

完成上面的兩個Model以後，剩下的都是一些與列表相關的狀態了。將TodoItem與TodoForm進行組合，構成整個TodoList應用的基本Model：

// models/TodoList.ts
import { types } from 'mobx-state-tree';
import { TodoItem } from './TodoItem';
import { TodoForm } from './TodoForm';

export const TodoList = types
  .model('TodoList', {
    adderForm: types.optional(TodoForm, {}),
    editorForm: types.optional(TodoForm, {}),
    list: types.array(TodoItem),
  });
複製代碼

其中adderForm與editorForm分別表示新增Todo與編輯Todo的表單Model，list用於管理Todo列表。

仔細觀察目標的成品圖，他還包括三個篩選按鈕All、Active、Completed，用於篩選展示的Todo列表的類型，這裏能夠將三種類型定義爲枚舉TodoFilterType，新建enums.ts文件，輸入代碼：

// enums.ts
export enum TodoFilterType {
  All = 'All',
  Active = 'Active',
  Completed = 'Completed'
}
複製代碼

而後爲TodoList新增一個filterType的狀態：

// models/TodoList.ts
import { types } from 'mobx-state-tree';
import { TodoItem } from './TodoItem';
import { TodoForm } from './TodoForm';
import { TodoFilterType } from '../enums';

export const TodoList = types
  .model('TodoList', {
    adderForm: types.optional(TodoForm, {}),
    editorForm: types.optional(TodoForm, {}),
    list: types.array(TodoItem),
    filterType: types.optional(types.string, TodoFilterType.All),
  });
複製代碼

有了這幾個基礎狀態，就能夠獲得其餘幾個衍生狀態：

// models/TodoList.ts
...
export const TodoList = types
  .model('TodoList', {
    ...
  })
  .views(self => ({
    // 已完成的Todo列表
    get doneList() {
      return self.list.filter(i => i.done);
    },
    // 未完成的Todo列表
    get activeList() {
      return self.list.filter(i => !i.done);
    },
    // 是否所有完成
    get isAllDone() {
      return this.doneList.length === self.list.length;
    },
    // 剩餘未完成的Todo數量
    get activeCount() {
      return this.activeList.length;
    },
    // 當前展示的Todo列表
    get showList() {
      switch (self.filterType) {
        case TodoFilterType.Active:
          return this.activeList;
        case TodoFilterType.Completed:
          return this.doneList;
        default:
          return self.list;
      }
    },
    // 是否顯示主體UI（沒有Todo數據的時候只顯示一個新增輸入框）
    get isShowMain() {
      return self.list.length > 0;
    },
    // 是否包含已完成的Todo，用於控制右下角[Clear completed]按鈕的展示和隱藏
    get hasDoneTodos() {
      return this.doneList.length > 0;
    }
  }))
複製代碼

最後，再補上更新狀態的actions：

// models/TodoList.ts
import { types, cast, Instance } from 'mobx-state-tree';
import uuid from 'uuid/v1';
...
export const TodoList = types
  .model('TodoList', {
    ...
  })
  .views(self => ({
    ...
  })
  .actions(self => ({
    // 切換所有完成/所有未完成
    switchAllDone(done?: boolean) {
      if (typeof done !== 'boolean') {
        done = !self.isAllDone;
      }
      self.list.forEach(item => {
        item.switchDone(done);
      });
    },
    // 切換列表過濾類型
    setFilterType(filterType: TodoFilterType) {
      self.filterType = filterType;
    },
    // 新增Todo
    addTodo() {
      if (self.adderForm.valid) {
        self.list.push(cast({
          id: uuid(),
          title: self.adderForm.trimedValue,
          done: false
        }));
        self.adderForm.reset();
      }
    },
    // 更新Todo
    updateTodo() {
      if (self.editorForm.valid) {
        const item = self.list.find(i => i.id === self.editorForm.targetTodoId);
        if (item) {
          item.title = self.editorForm.trimedValue;
        }
        self.editorForm.reset();
      }
    },
    // 刪除Todo
    removeTodo(todoId: string) {
      const index = self.list.findIndex(i => i.id === todoId);
      if (index >= 0) {
        self.list.splice(index, 1);
      }
    },
    // 清除已完成Todos
    clearDone() {
      self.list = cast(self.list.filter(i => !i.done));
    }
  }));
  
export type TodoListInstance = Instance<typeof TodoList>;
複製代碼

上面的代碼在給一些狀態賦值的時候，用到了MST提供的cast方法，這個方法僅在TypeScript中有意義，由於他僅僅是將入參的類型轉換成對應的狀態的類型，使得代碼的類型能經過TypeScript的檢測（由於在TypeScript看來，沒有cast的時候，等號左側和右側的兩個值並非類型匹配的）。

另外，在新增Todo的時候，使用了uuid庫提供的方法生成Todo的惟一id。注意在項目中安裝uuid依賴。

本實例中還依賴了classnames庫，也須要一併安裝。因爲uuid以及classnames庫都不包含類型定義文件（*.d.ts），在項目中新增了一個modules.d.ts文件，代碼以下：

// modules.d.ts
declare module 'classnames';
declare module 'uuid/v1';
複製代碼

更新Root

要在應用中使用上面定義的Model，還須要將他們加入到狀態樹中，更新models/index.ts文件：

// models/index.ts
import { types } from 'mobx-state-tree';
import { TodoList } from './TodoList';

export const Root = types
  .model('Root', {
    todoList: types.optional(TodoList, {}),
  });
複製代碼

至此，這個TodoList實例的狀態樹就構造完成了。