[Flutter/Dart]Reduxでリモートデータベースのデータで状態を初期化

やりたいこと

Reduxで状態管理をする。状態はAppStateとする。

1. アプリ開始時にリモートのデータベースからデータの取得を開始

2. データを取得

3. 取得中は待機マークを表示

4. 取得したデータからAppStateを作成

5. 作成したAppStateを元にUIを描画

方法

3、4、5を実現するためには、「取得完了」のフラグをAppStateに追加しましょう（※1）。

ビューはこのフラグを見て表示を切り替えます（※2）。

フラグをAppStateの変数にしておけば、フラグの値が変わった時に自動でリビルドしてくれます。

1のために、データ取得処理を行うAction（FetchDataAction）を追加しましょう。

FetchDataActionを投げることで、リモートデータベースからのデータ取得を開始します。

middlewareではFetchDataActionが投げられた場合、データを取得し（上記2）、完了したら、取得したAppStateでstoreの内容を書き換えるAction（ExchangeStateAction）を発行します（※3）。

この時、取得完了フラグの値も変えましょう（※4）。

ExchangeStateActionが発行されたら、reducerでstoreのstateを差し替えます（※5）。

コードで書くと以下のようになります。

class AppState{

  final ItemListState itemListState;
  final bool fetched;  //（※1）
}

//middleware

void AppStateMiddleWare(Store<AppState> store, dynamic action, NextDispatcher next) async {

  if (action is FetchDataAction){
 
    if (!store.state.fetched) {
      AppState state = await getData();  //データ取得処理
      state = state.changeFetched(true);  //（※4）
      store.dispatch(ExchangeStateAction(state)); //（※3）
    }
  }
  //・・・
}

//reducer

AppState appStateReducer(AppState state, action){

  if (action is ExchangeStateAction){
   return action.state; //（※5）
  }
  //・・・
}

//ビュー

@override
Widget build(BuildContext context) {

  return StoreConnector<AppState, bool>(
    converter: (store) => store.state.fetched,
    builder: (context, fetched)=> Navigator.of(context).push(
      MaterialPageRoute(
        builder: (context) => fetched? MainPage(context): 
         CircularProgressIndicator(); //（※2）
      )
    ),
  );
}

最後に

わかってみると簡単ですが、最初は中々手こずりました。reduxではどこでどの処理やらせるか慣れるまでに少し掛かりますね。