top of page

[Flutter/Dart] Initialize state with remote database data in redux


Things to do

Use Redux for state management. Let the state be AppState.

  1. Start acquiring data from remote database when app starts

  2. Get Data

  3. Waiting indicator is displayed during acquisition

  4. Create AppState from acquired data

  5. Draw UI based on created AppState


Methods

To achieve 3, 4, and 5, add a "fetched" flag to AppState (*1).

The view switches the display based on this flag (*2).

If you add the flag as an AppState variable, the view will automatically be rebuilt when the flag changes.


For 1, let's add an Action (FetchDataAction) that handles data acquisition

Start fetching data from the remote database by dispatching a FetchDataAction.


In the middleware, when FetchDataAction is dispatched, the data is acquired (above 2), and when completed, an action (ExchangeStateAction) is dispatched to replace the contents of the store with the acquired AppState (*3).

At this time, also change the value of the acquisition completion flag (*4).


When the ExchangeStateAction is dispatched, the reducer replaces the store state (*5).


The code looks like this:


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();  //data acquisition
      state = state.changeFetched(true);  //(※4)
      store.dispatch(ExchangeStateAction(state)); //(※3)
    }
  }
  //・・・
}
//reducer

AppState appStateReducer(AppState state, action){

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

@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)
      )
    ),
  );
}


Lastly

It's easy to understand, but I had a hard time at first. In redux, it takes a little while to get used to where and what processing is done.


Recent Posts

See All

[Flutter/Dart] Format string with TextField

What want to do I want to create an input form using TextField. For example, if the input content is a monetary amount, I would like to display it in 3-digit delimiters with a ¥ prefix. Rather than ha

Comments


Let's do our best with our partner:​ ChatReminder

iphone6.5p2.png

It is an application that achieves goals in a chat format with partners.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png

Let's do our best with our partner:​ ChatReminder

納品:iPhone6.5①.png

It is an application that achieves goals in a chat format with partners.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png

Theme diary: Decide the theme and record for each genre

It is a diary application that allows you to post and record with themes and sub-themes for each genre.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png
bottom of page