状態管理を楽にする道

Transcript

1. 状態管理を楽にする道 @kalanyei

2. 自己紹介 Kalan 台湾出身 福岡在住 Twitter: @kalanyei React 開発歴五年

3. よくあるパータン 1. まずローディングを出す 2. useEffectでAPIを呼ぶ 3. setPost を呼んで状態を更新 4. 記事を表示する

4. 問題点 • エラーの場合、どう対応すべきか？ • Loading は loading フラグで判断ではなく postがヌルかどうかで判断する

5. フラグを追加！ isLoading, error を追加 .catchでエラー処理する

6. 罠 エラーになったときisLoadingがtrueのまま エラーコンポネントじゃなくLoadingが表示 されてしまう postがヌルに要注意。 Can not read property ‘content’

   of null
7. None

8. 仕様変更なら。。。 • APIが失敗するときに３回までretryしてね。 • ユーザーが戻るボタンを押したとき、もしAPIが終わって いないならキャンセルしてね。

9. さらにフラグ追加

10. None

11. エラーをリセットする必要がある

12. 問題点 • 状態が多くなればなるほど負担がかかる • 実装を徹底的に見ないとロジックはわからない • 仕様変更があったときにコードを変更する必要がある • 変更に応じてバグが出やすくなる 状態が最初から複雑ではなく

    どんどん複雑になっていく

13. 状態が最初から複雑ではなく どんどん複雑になっていく

14. 解決案 1 - useReducer 同じところで複数の状態を変更するとき 通常、useReducer が useState より好ましいのは、複数の値にまたがる複雑な state

    ロジックがある場合や、前の state に基づいて次の state を決める必要があ る場合です。また、useReducer を使えばコールバックの代わりに dispatch を下位 コンポーネントに渡せるようになるため、複数階層にまたがって更新を発生させ るようなコンポーネントではパフォーマンスの最適化にもなります。 https://ja.reactjs.org/docs/hooks-reference.html#usereducer
15. None
16. None
17. None
18. None

19. 改善 • 何をするのかを明示している（アクションの名前でわかる） • 実装はアクションやデータを呼ぶだけ • reducerで状態遷移を統一している • reduxはみんな使っている（かも） reducer

    や actionを定義するのはちょっと面倒くさいけど。。。

20. 解決案 2 - flag使わず、statusを使う

21. フラグの問題点 • if (!loading && success && !canceled) みたいなコードが発生しやすい •

    新しいフラグを追加すると、状態が2^n個になる • 開発者はすべての状態を把握することが不可能になる
22. None

23. TypeScriptに優しい if (status === 'error') {}

24. また問題点がある • 状態遷移の制御はできない • 状態遷移はわからない

25. ステートマシン • 遷移（状態に入る、出るとき行う動作） • 状態 • 終了状態 image source: wiki

26. ちょっと似てる？ • actionは遷移（push, coin） • statusは状態（locked, un-locked）

27. 似てるけど足りないよ • 制御はできない。（completed状態になってもloading状態に入る 事ができる） • 開始、終了動作は定義していない

28. xstate https://github.com/davidkpiano/xstate • Actions ：状態に入る、出るときするべきこと • Guards：状態遷移を条件による制御すること ステートマシンを扱えるJavaScriptのライブラリ

29. 状態遷移を可視化する ちゃんと目で見えると議論しやすい

30. 遷移図を定義する

31. None

32. https://xstate.js.org/viz/

33. React に導入！ useMachine

34. React に導入！

35. None

36. シンプルになった！

37. まとめ • フラグをできるだけ抑える • フラグを使わずに、statusを定義する （TypeScriptに一緒に使うと更に効果的） • useReducerを活用する • 状態遷移図を事前に定義する

    • 絵を書く • xstateみたいな状態管理ライブラリの導入を検討する

38. リソース • xstate: https://xstate.js.org/ • xstate visualizer • Robust User

    interface with finite state machines • XStateで状態遷移を共通言語にしよう • Should I useState or useReducer

39. ご清聴ありがとうございました！