【React】Reduxによる状態管理
前回、ReactでなぜReduxを使うのか書きました。
今回は、Reduxによる状態管理について英語とかも読みながら自分なりにまとめてみました。
【目次】
1. Reduxの状態管理
Reduxの状態管理モデルは、Fluxという状態管理モデルの思想をもとに作成されたらしいです。
1.1. Fluxの状態管理モデル
https://github.com/facebook/flux/tree/master/examples/flux-concepts
Fluxでは上記図のように状態管理しており、
Action ➡ Dispatcher ➡ Store ➡ View ➡ Action ・・・
とデータが1方向に流れていることがわかります。
Dispatcher
DispatcherはActionを受け取り、Dispatcherに登録されているStroeにActionを送ります。
ActionとStoreの橋渡しみたいなことしてる。
Store
アプリケーションのデータを保持するもの。
Store内のデータは、Actionによってのみ変更される。
Storeのデータが変更されるたびに、Viewにその変更が反映される。
例えば、検索アプリでいうと「検索バーに入力された値」「検索結果」などといった値が保持され、Actionによって変更される。
Actions
Actionには実行させたいイベントが定義されている。
StoreにActionがDispatchされると、Store内のデータが更新される。
例えば、検索アプリ内で「検索ボタンを押したら入力された値でデータを検索したい」といったリクエストみたいなの。
1.2. Reduxの状態管理モデル
ReduxにはReducerというものが出てきます。
Reducer
ReduxではActionはただのオブジェクトを返す関数で、ReducerがActionから受け取ったイベントごとに実際の処理を行う。
1.3. Action と Reducer
Actionは下記のようにイベントを識別するためのtypeと、Actionの実行に必要なデータ(引数)を定義するだけ。
export const onSearchClick = (value) => ({ type: "SERCH", value, }); export const onResetClick = (number) => ({ type: "RESET", });
Reducerでは、現在のstateとActionから新しいstateを作り出します。
下記の例だと、Actionのtypeによって処理を分岐しています。
typeが「"SERCH"」であれば、現在のstateのserchValueの値を引数のaction.valueで更新しています。
typeが「"RESET"」であれば、現在のstateのserchValueの値を空文字で更新しています。
const initState = { serchValue: "", }; export default (state = initState, action) => { if (action.type === "SERCH") { return { ...state, serchValue: action.value, }; } else if (action.type === "RESET") { return { ...state, serchValue: "", }; } else { return state; } };
このReducerからreturnされたstateが、Storeに反映されViewが更新されます。
2. まとめ
ReactはViewに特化しているため、データの管理について不便なことがでてきます。
この不便を解消するために、Reduxというフレームワークを使ってデータの状態管理を行うといった感じです。
記事内で間違いなどありましたら、ご指摘いただけると助かります。