記前端狀態管理庫Akita中的一個坑

siegaii發表於2019-06-23
前端

記狀態管理庫Akita中的一個坑

Akita是什麼

Akita是一種基於RxJS的狀態管理模式，它採用Flux中的多個資料儲存和Redux中的不可變更新的思想，以及流資料的概念，來建立可觀察的資料儲存模型。 無論是Angular、React、Vue、Web元件，還是普通的舊式JS，秋田都可以完成繁重的工作，並作為維護乾淨、無樣板、可伸縮的應用程式的有用工具。

Akita基於物件導向的設計原則，而不是函數語言程式設計，因此具有OOP經驗的開發人員應該感到很熟悉。它您的團隊提供了一個不可偏離的固定模式。

注意一個坑

在建立Entity Store時根據需求您可能需要在@StoreConfig()裝飾器中配置Entity Store 的id屬性

直接上程式碼

一段ts程式碼

import { Todo } from './todo.model';
import { EntityState, EntityStore, StoreConfig } from '@datorama/akita';
​
export interface TodosState extends EntityState<Todo> { }
​
// fixme 注意這裡
@StoreConfig({ name: 'todos' })
export class TodosStore extends EntityStore<TodosState, Todo> {
  constructor() {
    super();
  }
}

 

這是一段官方的demo，但是其中有個坑。 若您Entity Store中的實體型別中唯一標識不為id，則需要自己手動設定 Akita @StoreConfig 會預設繫結您實體型別中的id屬性作為唯一標識，若 不繫結唯一標識且@StoreConfig又找不到id屬性則EntityStore在呼叫 set儲存資料時會出錯（但是不會報錯。。。。。天坑，不知道時有意為之還是bug）

若唯一標識Entity Id不為id則寫為下面這種形式

一段ts程式碼：

import { Todo } from './todo.model';
import { EntityState, EntityStore, StoreConfig } from '@datorama/akita';

export interface TodosState extends EntityState<Todo> { }

// fixme 注意這裡，修改後為
@StoreConfig({ name: 'todos'，idKey: yourId })
export class TodosStore extends EntityStore<TodosState, Todo> {
  constructor() {
    super();
  }
}

 

吐槽一下： 還有就是官網在文件關於這個需要特別注意 事項這個唯一標識繫結的介紹是在建立Entity Store之後的...（坑死歐啦）

相關文章