Redux Toolkitの感想

2020/09/25 04:00:00 +00:00

これです

Redux Toolkit | Redux Toolkit

なぜ使おうと思ったか

この辺を読んで「入れてもいいかな」から「やってみよう」になった(なるべくデフォルトで作って余計なものを入れたくない気持ちが邪魔をしていた)
- TypeScriptでReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話 | フューチャー技術ブログ
- りあクト！ TypeScriptで始めるつらくないReact開発第3版【Ⅲ. React応用編】 - BOOTH
Redux + TypeScript だと確かにコード量が多くなり、自分のアプリケーションでもアクションの型定義で200行近く、アクション自体で300行超だったので見通しが悪かった

進め方

Redux Toolkit に tutorial があるのでそれを読んで、実際にコードの置き換えをしていくだけ
- Basic Tutorial | Redux Toolkit
- Basic => Intermediate => Advanced と段階があるけど、Advanced までやらないと非同期の処理が出てこないので最後までやる
redux toolkit をインストールすると、redux/redux-thunk が一緒に入ってくるので、最初から toolkit を使うのが便利かもしれない（ただし redux のバージョンがちょっとだけ古い）

結果

実際にコード量が減った
- https://github.com/fourside/filmemo/pull/29
  - +586 -790
- slice (action + reducer なオブジェクト)を作ると、action creator を用意せずに済むのがうれしい
- 結果 actions.tsとその型情報を全部消せた
コードの見通しがよくなった
- reducer は reducer.ts に、 action は actions.ts に、というようにしていたところ、子の state 毎に features/xxx といったディレクトリを切って、そこに reducer/action を収めるようにした
- tutorial の通りに進めると、ある程度自然と Redux の Style Guide の通りになるので安心感がある
  - この安心感のおかげで、redux に対するうっすら苦手意識みたいなのはなくなった
使った API は createSlice configureStore くらいで、簡単に導入できる
- あとで createSelector も触っておく

悩んだところ

reducer の中で state を mutate してるかのようなコードを書くこと

Intermediate Tutorial | Redux Toolkit
- redux toolkit の中で immer.js を使っており、実際には mutate しない動作になるとのこと
- 通常の reducer では更新しない項目まで面倒みないといけないので、意図が分かりにくいコードになる
知らないとびっくりされそうなポイントだなと思ったが…
- redux toolkit のAPIに渡すものの中でやることなので、一度知ってしまえば混同することはなさそう

非同期なアクション(thunk action)の戻り値が欲しいときがある

dispatch(someAsyncAction()) は promise を返すわけではなし、reduxの管理するstateから実行結果を得るしかない
containerをかませればできるのだけど、できれば redux の hooks を使いたい
以下、個別のケースを2つ

認証のリダイレクト後に未認証、認証のチェックをしたい

未認証ならサインイン画面に飛ばすとかやりたいんだけど、初期値の状態を経て認証状態になるので、単純に任意の値がfalsyかどうかで判断できない
authed | unauthed | unknown みたいな3値で判定するようにした(ここでの unknown は、SQL での null は未定を意味するみたいな発想)

form送信して成功/失敗のチェック

成功したら画面遷移などさせたいし、失敗したら留まって欲しい
結果を redux で管理する？
- だとして、結果をクリアするタイミングとかエンバグしそうな箇所を作りたくない
とりあえず、成功時の処理をコールバックとして thunk action に渡すようにした
- これはあんまりよくないやり方だと思う…ので、thunk action を使わず、カスタムフックを作ってそこでプレーンなアクションを dispatch するのがきれいなように思える

最後に

bundle サイズどれだけ変わったか。

File sizes after gzip:

  241.45 KB (+6.08 KB)  build\static\js\4.d246d372.chunk.js
  54.38 KB (+11 B)      build\static\js\5.c7a89df4.chunk.js
  9.4 KB (-3 B)         build\static\js\0.cba94f39.chunk.js
  6.04 KB (+164 B)      build\static\js\main.b9447786.chunk.js
  3.07 KB (+5 B)        build\static\js\6.b4b32cf6.chunk.js
  3.05 KB (-19 B)       build\static\js\8.f62b749c.chunk.js
  2.35 KB (+6 B)        build\static\js\7.be5a358d.chunk.js
  1.23 KB (+1 B)        build\static\js\runtime-main.681aaec9.js
  731 B (-1 B)          build\static\js\1.816b4f1d.chunk.js
  443 B (+3 B)          build\static\js\9.1e585942.chunk.js
  304 B                 build\static\css\main.ed9b3d4b.chunk.css

おおよそ6KBの増加。これを許せるかどうかはプロジェクトに依るだろうな。とはいえ保守性に関わるのでできれば使いたいなと思います。