はじめに
Reactでアプリを作成する際、状態を管理する方法は
いくつかあると思います。
Context APIや、Recoilなど、便利なものが数多くある中で、
今でももっとも使用率が高いのがReduxだと思います。
今回はRedux、またRedux toolkitについてまとめてみようと思います。
Reduxとは
Reduxとは状態（state)を管理するためのライブラリーです。
状態管理をFluxの概念で行なっており、Reactとの相性がいいです。
管理する方法として、Reduxには主に4つの要素があります
- Action
- Action Creator
- Store
- Reducer
Action, Action Creator
値を新しく作りたい、値を更新したい！などのイベントを発生させたい時、
そのイベントで「何をしたいのか」をReduxに伝えなければなりません。
それがActionです。
ActionのオブジェクトはAction Creatorメソッドに値が渡されて生成されます。
Actionは何をしたいのかという情報がないといけないので、
必ず「type」プロパティを持つ必要があります。
Store
Storeは状態（State）を管理する倉庫のようなものです。
Actionを無事作成できたら、その情報はStoreに渡されます。
そしてstateを更新するためのdispatch(action)を提供してくれます。
Reducer
さきほどStoreで提供されたdispatchを受け取り、新しいStateを作成
してくれます。
これがReduxによる状態管理の一連の流れです。
Redux toolkit
正直に言うと今の説明だけではReduxを使うのは結構大変です。
ですがその悩みをある程度解決し、簡単にReduxを使えるようにしたのが
Redux toolkitです。
Redux toolkitはまずAction Creatorを書く必要がなくなります。
またActionとReducerを同じオブジェクト内に書くことができるので
見やすさも向上します。
また、個人的に一番嬉しいのが、Stateの不変性を意識しなくても良い点です。
Reduxのreducerは同じ引数を渡されたら必ず同じ結果を返す関数（純粋関数）となるように書かなくてはいけません。
しかしtoolkitではこの点を意識しなくても大丈夫です。
またTypeScriptの型制御を効かせながらコードを書くことが
できるので、TypeScriptとの相性もいいです。
私の中でReduxを使うならtoolkitを使わないのは
もったいない！という考えになってますw
最後に
Reduxは大規模なアプリになる程重宝しますがそもそも
入門するのが大変でした。
今ではtoolkitのおかげでその敷居は低くなって、
とても使いやすくなったように感じます。
--template redux-typescriptで簡単に導入もできます。
これからもReduxバリバリ使っていこうと思います！