vue+akitaでのステート設計パターン

Akita とは

AkitaはDatoramaというセールスフォースに買収されたマーケティング会社に開発されてるOSS。
Rxjsで作られた、Angular,React,Vueなどでのステート管理ライブラリ。

流行りのステート管理にはflux実装のReduxやvuexなどあるけれど、正直言って登場人物が多すぎて冗長過ぎる。だからmobxとかもあるけど、それならもはやakitaでいいんじゃないかって気がする。

※ちなみにakitaはchrome extensionのredux-devtoolで状態を追える。
詳しいコンセプトはこちら

Store

Akitaには２種類のStoreが存在する。

Store

Storeはストアの状態を管理する単一なObjectなどを入れるところ。基本的にはコレクションなどは入れるべきではない。
提供されるAPIはsetLoading,setError,destroyのみ。

EntityStore

EntityStoreはデータなどを入れるとCollectionとして管理してくれる。
こちらは特殊でsetLoading,setError,destroyは当然提供されてますが、コレクションの管理もしてくれます。

e.g.

import { EntityState, EntityStore, StoreConfig } from '@datorama/akita';

type User = {
  id: number;
  name: string;
};

interface UsersState extends EntityState<User> {}

@StoreConfig({ name: 'users' })
class UsersStore extends EntityStore<UsersState, User> {
  constructor() {
    super();
  }
}

const usersStore = new UsersStore();

const users = [{ id: 1, name: 'name 1' }, { id: 2, name: 'name 2' }, { id: 3, name: 'name 3' }]
userStore.add(users);

とすると、こんな感じでEntityStoreが管理してくれます。

{
  users: {
    entities: {
      '1': {
        id: 1,
        name: 'name 1'
      },
      '2': {
        id: 2,
        name: 'name 2'
      },
      '3': {
        id: 3,
        name: 'name 3'
      }
    },
    ids: [1, 2, 3],
    loading: false,
    error: null
  }
}

Store/EntityStoreへのアクセス

本家より拝借したakitaアーキテクチャーイメージ

登場人物は以下の３種類。

Service

Storeを更新する。
ComponentはServiceのIFを意識するだけ。

Store

上の方で説明済み。

Query

Storeからデータを取得する。Observableにデータの取得ができる。

基本的には以下の流れ。

1. ComponentからServiceを介してStoreを更新
2. ComponentからQueryでStoreを取得

normalizr+reduxのようなステート設計

ここではredux+normalizrのようなentityとidを分けて保管して、表示するidだけを他で管理するようなUser一覧ページを作ってみる。
- Normalizrを使用したReduxの実装パターン

細かいところはGithubに上がってるので、ソースコード読んでほしい。

１. UserListコンポーネントは表示する情報を管理するこんなStoreを持つ。

import { Store, StoreConfig } from '@datorama/akita';

export interface UserListState {
  paging: {
    page: number;
    total: number | null;
  };
  ids: Array<number>;
}

export function createInitialState(): UserListState {
  return {
    paging: {
      page: 1,
      total: null
    },
    ids: []
  };
}

@StoreConfig({ name: 'userList' })
export class UserListStore extends Store<UserListState> {
  constructor() {
    super(createInitialState());
  }
}

export const userListStore = new UserListStore();

redux-devtool

２. APIの結果となるUser情報を管理するEntityStoreをsharedに持つ。
APIで情報を取得する度にここに蓄えた後、上記のStoreも更新する。

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

export interface UsersState extends EntityState<User> {}

@StoreConfig({ name: 'users' })
export class UsersStore extends EntityStore<UsersState, User> {
  constructor() {
    super();
  }
}

export const usersStore = new UsersStore();

redux-devtool

3.Componentでは1のStoreをwatchして、画面に表示するUserListを決定して更新する。

DEMO

こうすることでEntityStoreはフロントエンドでのキャッシュにもなるし、データ構造自体も理解しやすくなるかもしれない。。。と思った。でも、もう少しStoreとEntityStoreは疎結合にすべきな気もする 他にもっといい方法があったら誰か教えてください。。。
Github