こんにちは　take-2405です。

今回はReact+Reduxの入門者向けに記事を書きたいと思います。
とは言いつつも、僕自身１週間ほど前まではReactは触ったことはあったものの、Reduxについては全くの初心者でした。

そんな僕が、Reduxを書かざるを得ない状況で、１週間で基本的な概念の理解～与えられたタスク（昨日の実装）まで行った際の経験について書き残したいと思います。

注意

この記事ではRedux-toolkitを使用する方を対象としています
理解が不十分で誤った知識を記載している場合があります（その際はご指摘ください）

目次

Redux toolkitとは.
Redux(Redux toolkit)の基本的な概念(知識)の理解.
実際にコードを書く.
参考にさせていただいた記事.
(1,2の手順が逆だと感じる方もいるかもしれませんが、今回はこの順番です。)

1. Redux toolkitとは

素のReduxを使う際に、簡単に・効率良く開発を行うためのツール
ReduxのチュートリアルをしてからRedux toolkitのチュートリアルを行うといかに簡略化してReduxを使用できるか実感できると思います。

2. Redux(Redux toolkit)の基本的な概念(知識)の理解

開発するために僕が最低限必要だと感じた概念のみを記載します。

State
アプリケーション内の状態管理(変数の値の保持)を行うオブジェクト
MVCでいうところのModelなどに相当する
Action
State(アプリケーション内の状態)を変更するためのオブジェクト
Action Creater
アクションを生成するための関数
パラメーターを受け取り、Actionを生成し返す
Reducer
現在の状態(State)とActionを引数にとり、更新された状態を返す
Store
Status/Action/Reducerを結びつけるオブジェクト
Selector
StoreからStateを引き出すための関数
Selectorを使わないとStateを参照したりReducerに渡したりできない
Slice
個別のストア(ストア全体の一部分のストア)

3. 実際にコードを書く

実際にコードを書く際の順序についてです。(僕流の)
まずReduxの状態管理の流れを図で見てください。

上記の図と各用語の概念をなんとなく頭に入れたらいよいよコードを書いてみましょう。
以下の順序でコードを書くと個人的に書きやすいと感じました。

１. コンポーネント(UI)を作成する
２. Storeを作成する
２-１. コンポーネント(UI)や必要な機能のロジックを踏まえてStateを作成
２-２. Stateをコンポーネント(UI)で利用可能にするためのSelectorを作成
２-３. Stateを更新するためにSliceを作成.
(Stateの初期値を定義、想定するアクションとそれに伴うStateの変更を定義する)

３. コンポーネント(UI)とState、Dispatchを結びつける.
（コンポーネントのソースコード内でSelectorを使用しStateを利用可能にする。ユーザーのアクションを検知し、Dispatchが発火するようDispatchを記述する）

実際のコード(State、Dispatch、Sliceの書き方など)は４の「参考にさせていただいた記事」を見てみてください。

4. 参考にさせていただいた記事