ReduxToolkitが便利

はじめに

ここでは、Redux Toolkitを使ってCRUD機能をもったアプリを作り終えたばかりの初学者の私が、Reduxに関しての理解をまとめてみる。細かい知識は学習過程なので、現時点ではざっくりとした理解になります。

そもそもReduxとは

一言で言うと、state（状態）をグローバルに管理できるフレームワークの事。
Reactと相性が良いらしい。

Redux Toolkitとは

Reduxは便利である反面、初期設定の際に自分で用意しなければならないものがとても多く参入障壁が大きなフレームワークでした。
しかし、Redux Toolkit（RTK）の登場によって、導入がとても簡単になりました。アプリの立ち上げ時点でテンプレートを用いてRTKを導入してしまえば、必要となる便利グッズが全部ぶち込まれます。これから学習する方はRTKを導入しましょう。

Reduxのメリット（結論）

1. redux-devtools-extentionが超便利
2. コードが見やすくなる
3. 大きめのプロジェクトを管理しやすい

1. redux-devtools-extentionが超便利（要インストール）

みなさんはアプリを作成している際に、ディベロッパーツールを開いてコンソール画面で頻繁にデータの確認をしますよね。それと全く同じノリです。
ディベロッパーツール上でredux-devtools-extentionを使って、状態の確認をすることができます。
例えばAPI通信してきたデータを、ステートに保管できたかどうかや、今のステートに変更を加えた際に変更が成立しているかを簡単に確認できます。
Reduxを用いて作ったお天気アプリ

右側で常にステートの状態を把握できる便利機能です。

2. コードが見やすくなる

Reduxでは、sliceという特殊なファイル内で状態や関数を管理します。

• 見た目を構成するファイル（UI）と、状態の変化やAPI通信などを表す関数を基本的にsliceという別ファイルに記述する為、それぞれのファイルに記述されるコードを少なくすることが出来ます。また、それによってファイルごとの役割が明確に分かれている為、ごちゃごちゃせずに把握しやすくなります。
• 上記のメリットによって、状態だけでなく動作を表す関数もグローバルに管理できるようになり、好きな箇所でいつでも呼び出すことができるようになります。（３に関係してくる）

3. 大きめのプロジェクトを管理しやすい

hooksだけで完結できる小さなアプリであれば、あまり特別な恩恵はありません。だた将来的にもっと大きなプロジェクトを開発する一員になったり、チームで開発する場合には、より威力を発揮してくる部分だと思います。
それでも好きな箇所でいつでも状態を参照したり、関数を呼び起こすことができるのはとても便利だと感じています。

頻出Redux用語 （ざっくり）

slice

状態や動作を表す関数をまとめる為のファイル

store

Reduxで管理している状態を保管する場所。

reducer

なにか状態に変更を加えたい場合の処理を記述する。基本的にアプリ内だけで完結する状態の変更（API通信はしない）

createAsyncThunk / extraReducers

この２つは基本的にセットとなります。
API通信を必要とする動作の関数をcreateAsyncThunkを使って記述。そして通信先とのやり取りの後にはそのデータを元にUIに結果を反映させなければいけないのでextraReducersでその後の処理を記述する。
CRUD機能全般の関数の作成はここで行われることになります。
ただ、これを使わなくてもasync/(axios)/awaitなどを用いた一般的な非同期処理でも書く事は可能です。その場合はextraReducersが使えないので、通信後の変更をUIに反映させるコードを別で書く必要があります。要は、「せっかくreduxを使っているなら非同期通信の際にはこれを使うと便利だよー」という認識です。

公式サイト
参考記事

細かい用語の解説などは他の記事に委ねます。

最後に

使い方や状況によって状態管理はhooksを使ったほうが良い場合があるので、今後はhooksもきちんと学習して、上手な使い分けをできるようにしたい。
まだ学習段階ではありますが、少なくともCRUD機能をもった簡単なアプリをRedux Toolkitを使って３個ほど（TODOアプリ、お天気アプリ、ブログアプリ）作れるようになったので、一度記事にまとめてみました。
間違った認識がありましたら、ご指摘やアドバイスの方よろしくお願い致します。