こんにちは 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の書き方など)は４の「参考にさせていただいた記事」を見てみてください。