Redux をやめた

2016年から趣味で開発を続けている anchor という Chrome 拡張がある。
Chrome のタブやブックマーク、履歴から曖昧検索ができるというというありふれたものだが、個人的には便利に使っている。

どちらかというと、自分にとってこの拡張はフロントエンドの新しい技術を試すためのものという側面が強く、
React + Redux で作り始めてからというもの、Class Component から Function Component に書き換えたり、
TypeScript で書き換えたり、React Hooks を使ってみたり…と、いろんなことの勉強の場として使ってきた。

そして今回、長らく使い続けてきた Redux をやめた。
理由としては、React Hooks の登場によって Redux なしでも同じことができるようになったのと、
Ducks パターンよりも Hooks + 独自フックのほうがコードの分割単位がわかりやすくなりそうというのもあった。

実際に書き換えを行ったのが以下のPR。

github.com

Redux をやめて Hooks に一本化した感想としては、圧倒的に少ないコード量で同じ機能を実現できたので良かった。
まぁそもそもしょぼいアプリなので、Hooks で十分なのは当然という気もする。

書き換える中でちょっと悩んだのは、redux-saga で非同期処理を制御していた部分。
Saga では Redux の Middleware で特定の Action を拾って処理していたのが、Hooks では render サイクルの中で状態の変化に応じて useEffect で処理を行う感じになって、そこの頭の使い方の切り替えが難しかった。
(この実装であっているのか自信がないが…)

また、この拡張ではユーザーの入力に応じてインクリメンタルサーチを行うようになっているので、Saga の takeLatest を使って入力をスロットリングするようになっていた。
そこについては react-use の useThrottle を使うように書き換えた。
Hooks はこういったライブラリも充実していて便利。

Redux をやめると redux-logger や DevTools のような便利ツールを使えなくなるのが若干つらいが、
今のところそれ以上にコードのシンプルさにメリットを感じている。

まだまだ手探りではあるが、これからどんどん Hooks を使いこなしていきたい。