Redux入門[一週間前までRedux未経験だった僕が最低限学んだReact + Redux]

こんにちは　take-2405です。

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

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

注意

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

目次

1. Redux toolkitとは.
2. Redux(Redux toolkit)の基本的な概念(知識)の理解.
3. 実際にコードを書く.
4. 参考にさせていただいた記事.
   (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. 参考にさせていただいた記事