Redux Toolkit を良いと感じた理由をまとめてみた

はじめに

今回はフロントエンド開発の React で使われているステート管理ライブラリの 1 つである Redux Toolkit について紹介します。

React を使う上でステート管理ライブラリの選定は非常に重要でどのライブラリを選択するかによって設計やその後の開発やメンテナンスのし易さなどが変わってきます。

自分の本職はフロントエンドエンジニアではないのですが、過去に社内サービスや内部向け管理画面の開発を通して複数のステート管理ライブラリを使用した経験があります。 その経験を踏まえて Redux Toolkit の利点などを紹介できればと思っています。

この記事では Redux Toolkit と他のライブラリとの比較をメインに取り扱います。

React 自体の使い方やステート管理とは何か等の説明は割愛します。

Redux Toolkit の利点

まずは Redux Toolkit がなぜ良いと思ったか、その他のステート管理ライブラリと比べた所感を交えて簡単に述べていきます。

React ではステート管理は避けて通れない部分ですが、 React 自体のステート管理機能は必要最低限のものしか揃っていないため実際の開発ではステート管理ライブラリを使用することが多いです。

ステート管理ライブラリには Redux をはじめ、多くのライブラリが存在しますが自分が扱ったことのあるライブラリは以下になります。

• Redux
• MobX
• Unstated Next
• React Context API
• Redux Toolkit

このように複数のライブラリを使ってきたのは自分の中でしっくりとくるものを見つけられなかったのが理由です。 自分がステート管理ライブラリに求めるものは主に「簡潔であること」と「秩序が保ちやすいこと」です。

Redux

Redux は思想が分かりやすく、周辺ライブラリやミドルウェアなどの機能に加えて使用者の情報も多く提供されていたことが理由ではじめに採用したライブラリです。

実際に使い心地も初めは悪くなかったのですが、Action 周りで冗長なコードが多く徐々に見通しの悪さや扱いづらさを感じることが多くなり次以降のプロジェクトでは採用を見送ることになりました。

非同期処理に redux-saga を、ステートの管理に immutable.js を採用していたこともあり規模に対して余計に複雑なものになってしまったことも原因として考えられそうです。

MobX

MobX は Redux で冗長に感じていた Action 周りをすっきりできるのではと思い採用したライブラリです。

確かに MobX を使うことで Action 周りは簡素化できましたが、Redux に比べて自由度が高いこともあり徐々に秩序を保つのが難しくなっていきました。

Redux は React に組み込むことを前提としたライブラリのため、「どこに何を書く」「こういう場合はこう書く」といった点が整理されルール化されています。 MobX はそういった点が比較的自由なため開発者の判断に委ねられる部分が大きくなります。 自由度があがるのはいいことのように思える反面、ある程度しっかりとしたルール化や共通認識をもった上で作業を進めていく必要がありそういった点はルール化されたライブラリと比べて難しい点だと感じています。

• [参考] 今から始める React 入門 〜 Mobx 編
• [参考] React のステート管理には Redux と MobX のどちらを使うべきか

Unstated Next

Unstated Next は React Context API を薄くラップしたライブラリです。 React Hooks と組み合わせることで Action 周りを簡潔に、かつある程度ルール化された上で使用できそうだと思い採用しました。

その目論見はある程度達成できたのですが、 規模が大きくなるにつれ Context を使用するための Provider の入れ子が増えていくなど気になる部分も出てきました。 ステート分割の方法などをもう少しうまく考えられればこの辺りは改善の余地はありそうです。

機能は前述の React や MobX と比較すると劣るため何か凝ったことをやりたい場合は React の Hooks や他のライブラリ等を用います。

• [参考] redux に疲れたので unstated-next を試してみた
• [参考] unstated-next による Redux に頼らない状態管理の考察

React Context API

Unstated Next である程度手応えが掴めたので、ならばと素の React Context API も使ってみることにしました。 React Context API は React 組み込みの機能のため、Unstated Next を用いず使えるならそれに越したことはないと思い採用しました。

実際に Unstated Next と似たようなルールの元で Context API を使用することで Unstated Next は使わずに実装出来ます。 ただ、ライブラリを使っていた方が細かい部分でどういったルールの元で機能が使われているかという点が明確になるためそういった点ではライブラリを利用する価値はあるのかなと感じました。

Redux Toolkit

Redux Toolkit は従来の Redux で感じていた冗長さを吸収してくれるライブラリです。

元々の思想のわかりやすさもあり冗長で煩雑になりがちな点が解決しているのであれば試す価値はあるなと思い、一周回って戻ってきました。

まだ使い始めたばかりということもありますが Redux の思想の元でシンプルに記述できる点に今のところ手応えを感じています。

Redux Toolkit を使う利点については参考記事で詳しく解説してくれているのでそちらを参考にして下さい。

• [参考] いま Redux を導入するなら Redux Toolkit を使うべき
• [参考] Hook と Redux Toolkit で React Redux に入門する

各ライブラリの比較表

自分が過去に使用した経験のあるステート管理ライブラリについて簡単に振り返ってみましたが、ステート管理ライブラリは多種多様で一長一短のため今のところ銀の弾丸はないと思っています。 用途や規模に応じて適切な選択をするのが大切なのではないかなと感じています。

以下に各ライブラリを使用した所感について表にまとめてみたのでライブラリ選択の参考にしてみて下さい。

まとめ

この記事では Redux Toolkit を用いる利点を他のライブラリと比較して見てきました。 まだ自分自身も使い始めたばかりなので、使っていくうちに気づいた点などがあればまた記事にします。