Reactでアプリを作成する際に皆さんは状態管理ライブラリーは何を使用されていますか？
私はほとんどの場合はRedux ToolKitを使用しています。
おそらく個人開発レベルでReduxを導入するのはどうなのかと疑問を持つ方が多いのかなと思います。
少し前は私も個人開発ではpropsのバケツリレーで良いのでは？Reduxもかなり複雑で扱いにくいしと思っていました。
しかしRedux ToolKitというライブラリーを知ってから便利さゆえにどんな小さいアプリにも導入してしまいます。
そこで生のReduxとRedux ToolKitを比較してRedux ToolKitの有り難さを改めて実感したいと思います！
そもそもReduxとは？
Reduxは状態を管理するためのライブラリーです。
開発の規模が大きくなるほどに開発が容易になるので恩恵を受けることができる。
例えば素のReactでは親コンポーネントの情報を１０階層にある子コンポーネントに渡したい際には、その親コンポーネントと１０階層目の子コンポーネント内にある全てのコンポーネントでpropsのバケツリレーをする必要があります。また、新たな情報を渡したい際には全ての子コンポーネントを書き換える作業が発生します。このような作業はミスやエラーの温床になり兼ねない状態です。
ではReduxを導入するとどうなるのか。
開発者は状態管理とUIを分離して実装することができます。先程の例で言うと１０階層目のコンポーネントにReduxをコネクトするので、他のコンポーネントで状態のバケツリレーをする必要はなくなります。
上記のように便利に状態管理するためにReduxには大きく三つの機能があります。
一つずつ概要を説明していきたいと思います。
- action creator（action）
- store
- reducer
１. action creator（action）
ユーザーがインプット/アクションをした際にActionCreatorにAction制作の依頼が飛びActionが作成されます。
Actionを生成するだけではStore内のStateを更新することは出来ません。なので、ActionCreatorで生成されたActionをdispatchしてstoreに変更情報を送ります。
２. store
Storeはアプリケーションの全ての状態が集まっている場所です。
Storeはアプリケーション内で一つ存在し、一つの状態を保持しています。
状態などの情報が欲しい際にはこのstoreが受け渡しを行っています。
３. reducer
ReducerによってStore内のStateを更新する役割があります。引数のstateを更新するのではなく、新しいstateのオブジェクトを作成して返しています。
ReduxToolKitとは？
Reduxを簡単に実装するためのライブラリーです。
またTypeScript製なのでTypeScriptとの相性がとても良い特徴があります。
ReduxとRedux ToolKitを比較
生のReduxは必要最低限の機能しかないため、色々なモジュールを各自で揃える必要があります。それらを初学者が実装するにはかなりハードルが高いです。またReduxに慣れてきた人にとっては面倒に感じたりするのではないでしょうか。
Redux ToolKitではそのような煩雑な部分を解消してくれます。
初期設定
以下のmiddlewareが初期段階で組み込まれています。
- immutable-state-invariant
- serializable-state-invariant-middleware
- Redux Thunk
これらのmiddlewareが既に組み込まれているので初期設定が大分楽になり効率よくReduxの実装をすることでできます。
createSlice関数でaction creator（action）のコードが不要
createSlice()の中でreducerを実装する中で自動的にaction creator（action）が生成されます。
テンプレートがある
テンプレートがあるので、そのテンプレートを自分で色々と触って手軽に一連の動作を学ぶことができる。
以下がテンプレートのURLです。
https://github.com/reduxjs/cra-template-redux-typescript
# 最後に
私自身まだプログラミング初学者なのでReduxの恩恵をふんだんに味わえるような開発はできていないです。
しかし、個人開発の小さいアプリに導入するだけでかなり楽に状態管理をすることができています。
これからReduxに手を出す方に個人的にお勧めしたいのはRedux ToolKitのテンプレートを触ることです。
言葉では理解できないところが実際に触ることで理解できたりすると思います。
参考サイト