前置き
この記事では、ReactアプリケーションでReduxを使用する方法をまとめています。
ただし、ReduxはReactに特化したライブラリではなくJavaScriptのアプリケーションのためのライブラリであるため、まず純粋なReduxについてざっくり解説した後、Reactアプリケーションと一緒に使用する方法を解説します。
※ Qiitaの記事を書いていて、途中うまく書けなくなって断念することが多いので、未完成の状態でもとりあえず投稿しています。この文があるということは、未完成で編集中 or 諦めたのどちらかと考えてください。
Redux
Reduxとは？
JavaScriptアプリケーションのためのGlobal Stateを管理するためのライブラリ。
StoreにGlobal Stateを保存し、決められた方法でのみ値を取得・更新することができる。
Reduxのインストール
公式がRedux Toolkit（Redux coreとReactアプリの作成に便利な関数等をまとめたパッケージ）の仕様を推奨しているため、そのインストール方法を紹介。
npm install @reduxjs/toolkit
※ その他の導入方法はこちら
Reduxで知っておくべき用語
store
現在のstateを保存しているオブジェクト。
action
typeプロパティを持つオブジェクトで、storeに対してstateを更新するように依頼するために使用される。
他にもstateを変更するために使用する値を持たせる。（payloadをキーに設定することが多い）
action creator
actionを返す関数で、毎回アクションを記述するコストを減らすために記述される。
reducer
現在のstateとactionを引数に取り、新しいstateを返す関数。
reducerのルールは以下の通り
- 新しいstateを計算するのに、現在のstateとaction以外の値を使用してはいけない。
- 現在のstateを変更してはいけない。
- 非同期処理、ランダムな値の計算、その他の副作用を発生させる計算を行ってはいけない。
dispatch
storeが持つ関数で、stateを更新する唯一の方法。
actionを引数に持ち、そのアクションをreducerに渡してstateの変更を行う。
selector
特定のstateを取得するための関数。
Reduxの仕組み
storeの作成
createStore関数かconfigureStore関数のどちらかを使って作成。
storeから値の取得
以下のように、storeクラスのgetStateメソッドを使用して値を取得。
const state = store.getState()
const value = state.someKey.valueKey // someKey,valueKeyは適切なオブジェクトのプロパティを使用
ただし、毎回記述するのが大変なため、以下のようにselector定義・使用するのが多い。
const selectValue = state => state.someKey.valueKey // someKey,valueKeyは適切なオブジェクトのプロパティを使用
const value = selectValue(store.getState())
storeの値を変更する
storeの値を変更する方法は以下の3stepです。
- dispatch関数にactionを渡す。
- actionの値と現在のstateに基づいて、reducerが新しいstateを返す。
- reducerの返した値がstateに保存される。
ReactでReduxを使用する方法
導入
ReduxをReactアプリケーションで使用する場合、Redux Toolkitに加えてreact-reduxパッケージを使用する。
npm install react-redux
ReactでReduxを使用する
Redux公式チュートリアルPart 2で紹介されている方法を紹介する。
手順は以下の通り。
- sliceの作成
- storeの作成
- Reactアプリにstoreを導入
- stateの取得
- stateの更新
sliceの作成
createSlice関数（from '@redux/toolkit'）を使用してsleceを作成する。
※ sliceは、Reducerのロジック・actionがを含んだオブジェクト（型は以下の通り）
{
name: string
reducer: ReducerFunction
actions: Record<string, ActionCreator>
caseReducers: Record<string, CaseReducer>
getInitialState: () => State
}
storeの作成
configureStore関数（from '@redux/toolkit'）を使用してstoreを作成
Reactアプリにstoreを導入
Proveiderコンポーネント（from 'react-redux'）を使用してコンポーネントツリー内からstoreにアクセスできるようにする。
stateの取得
useSelector hook（from 'react-redux）を使用使用することで、Provider以下のコンポーネント内でstateを取得する。
stateの更新
useDispatch hook（from 'react-redux）を使用することで、Provider以下のコンポーネント内でstore.dispatchが使用できるようになる。
API＋便利な使い方
createSlice
型情報
type CreateSliceType = (ArgObjectType) => ReturnObjctType
type ArgObjectType = {
name: string
initialState: any,
reducers: Object<string, ReducerFunction | ReducerAndPrepareObject>
extraReducers?: Object<string, ReducerFunction> | ((builder: ActionReducerMapBuilder<State>) => void)
}
type ReturnObjctType = {
name: string
reducer: ReducerFunction
actions: Record<string, ActionCreator>
caseReducers: Record<string, CaseReducer>
getInitialState: () => State
}