ITエンジニア日記 ~NO SKILL, NO LIFE~

学んだ技術や、気になることをアウトプットしていきます。プログラミング, インフラ, etc...

【React】Reduxによる状態管理

前回、ReactでなぜReduxを使うのか書きました。
今回は、Reduxによる状態管理について英語とかも読みながら自分なりにまとめてみました。

【目次】

1. Reduxの状態管理

Reduxの状態管理モデルは、Fluxという状態管理モデルの思想をもとに作成されたらしいです。

1.1. Fluxの状態管理モデル

f:id:masakiXX0:20191225213916p:plain
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の状態管理モデル

f:id:masakiXX0:20191225222349p:plain
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というフレームワークを使ってデータの状態管理を行うといった感じです。

記事内で間違いなどありましたら、ご指摘いただけると助かります。