Flutter Redux の内部構造を考える

2021年7月10日に社内向けに行なった勉強会資料です。

実験用リポジトリ：https://github.com/Kotaro666-dev/flutter_redux_presentation

Transcript

1. © Nzigen, Inc. Flutter Redux の内部構造を考える 
 釜島光太郎
 1

2. 本日のアジェンダ
 1. Redux とは？
 2. きっかけ
 3. なぜ Redux は難しいのか？
 4. 内部構造を見てみる
 5. 実際に実験してみよう！
 2
3. Redux とは？
 3
4. きっかけ
 
 
 
 
 
 
 
 
 
 　 
 GNTV起動直後の処理で、 Redux を使ったチャンネル設定のコードが複雑でよく わからないな..... Action が dispatch される、なんか Middleware みたいなのがある、新しい state を作る Reducer はどこで行われているの？ 4
5. きっかけ
 
 
 
 
 
 
 
 
 
 　 
 某パイセン
 Redux では、Action が Dispatch されると、最初に Middleware での処理、最後に Reducer での処理が実行される。 Middleware は Reducer で新しい state を作る前の準備を行う役割を担っていて、 EDIA プロジェクトでは Notifier でそれを行っている。 こうした概要は公式ドキュメントに詳しく書いてあるから、あとで読んでみるといいで すね。 5
6. きっかけ
 Middleware とは？ Redux middleware provides a third-party extension point between dispatching an action, and the moment it reaches the reducer. People use Redux middleware for logging, crash reporting, talking to an asynchronous API, routing, and more. 出典：https://redux.js.org/ 6
7. きっかけ
 Middleware 7
8. きっかけ
 
 
 
 
 
 
 
 
 
 　 
 流れが一通り分かったし、デバッグモードでも確認してみると、 Middleware の処理 が行われた後に、Reducer が呼ばれているのが分かった。 でも、Dispatch しただけで、どうやって Middleware を見つけて、処理して、 Reducer が最後に実行されるようにするのだろうか？ 8
9. なぜ Redux は難しいのか？ 
 
 
 
 
 
 
 
 
 
 　 
 実行し、それが処理されて、最終的に状態が更新されるのは分かった。 でも、内部で実際に何が起きているのか見えない。 だから、一連の処理がどのように行われているのかが理解できない。 9
10. 内部構造を見てみる 
 10
11. 内部構造を見てみる 
 11
12. 内部構造を見てみる 
 12
13. 内部構造を見てみる 
 Middleware 1 Middleware 2 Middleware 3 Middleware 4 Middleware 5 Dispatch Action Reducer 13
14. 内部構造を見てみる 
 14
15. 内部構造を見てみる 
 15
16. 内部構造を見てみる 
 16
17. 内部構造を見てみる 
 Middleware 1 Middleware 2 action 17
18. 内部構造を見てみる 
 18
19. 内部構造を見てみる 
 1 19
20. 内部構造を見てみる 
 1. [reduceAndNotify]
 20
21. 内部構造を見てみる 
 21
22. 内部構造を見てみる 
 2 22
23. 内部構造を見てみる 
 List orignal
 [middleware1, middleware2, middleware3]
 
 List original.reversed
 [middleware3, middleware2, middleware1]
 23
24. 内部構造を見てみる 
 3 24
25. 内部構造を見てみる 
 1. [reduceAndNotify]
 2. [reduceAndNotify, middleware3]
 3. [reduceAndNotify, middleware3, middleware2]
 4. [reduceAndNotify, middleware3, middleware2, middleware1]
 25
26. 内部構造を見てみる 
 4 26
27. 内部構造を見てみる 
 List orignal
 [reduceAndNotify, middleware3, middleware2, middleware1]
 
 List original.reversed
 [middleware1, middleware2, middleware3, reduceAndNotify]
 27
28. 内部構造を見てみる 
 5 28
29. 内部構造を見てみる 
 1. middleware1(store, action, middleware2(store, action, next))
 2. middleware2(store, action, middleware3(store, action, next))
 3. middleware3(store, action, reduceNotifier(state, action))
 
 
 middleware1(store, action, middleware2(store, action, middleware3(store, action, reduceNotifier(state, action))))
 29
30. 内部構造を見てみる 
 準備はできた。 あとは、どうやって現在の middleware から次の middleware を呼んで 移動するのか？ Middleware の第 3 引数に入っている次の middleware == next をコールするだけ。 30
31. 実際に実験してみよう！ 
 31
32. 実際に実験してみよう！ 
 32
33. END
 END
 33