top of page

[Flutter]Read data from shared preference in Redux

Overview


I'm making a smartphone app with flutter. Redux is used for state management. Save the data I want to keep even if the application is turn off in the shared preference. Since I wrote about writing last time, this time I will summarize about reading.



Method


1. State to save


The saved data is as follows.

class Item{
   String name;
   int id;
}
class AppState{
   List<Item> items;
}

2. Create a constructor to read from json in each class

Item.fromJson(Map json){
  id=json['id'] as int;
  name=json['name'];
}
AppState.fromJson(Map json){
    items=(json['items'] as List).map((m)=> Item.fromJson(m)).toList()
}

If the member contains a class instance, the fromJson () constructor should be prepared for that class as in the case of writing.



3. Add method to read from shared preference

Future<AppState> loadFromPrefs() async{

  SharedPreferences prefs=await SharedPreferences.getInstance();
  var string=prefs.getString('itemState');
  if (string!=null){
    Map map=json.decode(string);
    return AppState.fromJson(map);
  }
  return AppState.InitState();
}

Read the data asynchronously and wait for the end with await.



4. Add action


Add LoadItemAction to read data from shared preference to store and GetItemAction to read data from store.

class LoadItemAction{

  final List<Item> items;
  LoadItemAction(this.items);
}

class GetItemAction{}

In LoadItemAction, the data brought from the shared preference to be saved in the store is taken as an argument. GetItemAction only retrieves store data, so there are no arguments.



5. Add reducer

List<Item> ItemsReducer(List<Item> items, action){

    if (action is GetItemAction){
      return items;
    }
    if (action is LoadItemAction){
      return action.items;
    }  
}

LoadItemAction returns the data passed as an argument, and GetItemAction returns the data retrieved from the store as it is.



6. Add middleware


Add the method read from the shared preference to middleware.

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

  if (action is GetItemAction){
    await loadFromPrefs()
        .then((state) =>
        store.dispatch(LoadItemAction(state.items)));
  }

  next(action);
}

Wait for loading from shared preference with await, and when completed, pass it to the argument of LoadItemAction and save it in store. After that, it is called from store by GetItemAction (next (action)).



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

Comentários


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