[Flutter] 2개 이상 store 관리

state 성격별로 store를 여러 개 만들 수 있는데 이 때 생기는 문제

store 하나

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (c) => Store1(),
      child: MaterialApp(
        home: MyApp(),
        theme: theme,
      ),
    ),
  );
}

여러 store를 모두 ChangeNotifierProvider로 등록해줘야 함
이렇게 여러 store를 사용할 땐 MultiProvider로 기존의 ChangeNotifierProvider를 감싸줘야 한다.

store 두개 이상

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (c) => Store1()),
        ChangeNotifierProvider(create: (c) => Store2()),
      ],
      child: MaterialApp(
        home: MyApp(),
        theme: theme,
      ),
    ),
  );
}

get 요청으로 갖고온 데이터 활용하기

그럼 이번에는 get 요청으로 가져온 데이터를 store 속 state에 넣는 방법을 알아보자

다른 함수랑 작성, 사용법이 똑같은데 async await만 잘 넣어주면 된다.

class Store1 extends ChangeNotifier {
  var profileImage = [];

  getData() async {
    var result = await http.get(Uri.parse('서버URL'));
    var result2 = jsonDecode(result.body);
    profileImage = result2;
    notifyListeners();
}

initState 때 쓴다 치면
깨알복습 initState 쓰려면 위젯이 stful이어야 한다.

void initState() {
  super.initState();
  Future.microtask(() {
    context.read<Store1>().getData();
  });
}

context.read<Store1>().getData(); 만 쓰게 되면
잠시 뻘건 화면이 떴다가 정상적으로 동작하는 걸 볼 수 있는데
Future.microtask 같은 걸 써서
MicroTask(비동기 작업 외 모든 동기 작업)를 먼저 처리하도록 해야 한다.
MicroTask가 끝나면 나머지 Task들을 처리하는 순서다.