Reduxについてアウトプット

Frontendの開発で、Reactを初めて利用しています。
その中で、よく分かってなかった、reduxについて改めて勉強し直したので、そのアウトプットです。
もし間違った記述などあったら、コメントよろしくお願いします。

【Reduxとは】

まず、Reduxについてですが、画面上の状態を管理するフレームワークとなります。
状態とは、簡単に以下の様な感じになります。
・今、画面上に、どんな値を表示させているのか？
・今、どんな画面が表示されているのか？

こんな状態を、Reduxで保持してやり、必要に応じて、サーバサイドへデータを送付したり、再表示してくれます。
因みに、Reduxはフレームワークとなるので、Reactだけでなく、Angularでも利用可能となります。

【Reduxの種類】

Reduxには、以下の5種類の処理が存在します。
※簡単な説明も追記しておきます。

種類	概要
Action	操作された際にどんな動作を行うのか記載する。
Action Creater	画面上で何か操作された際、Actionを作成してくれる。
Store	アプリケーションの状態を保持する。
State	アプリケーションの状態
Reducer	渡されたActionとStateから新しいStateを作成し返す。

【Reduxの大まかな流れ】

図にするとこんな感じとなります。下手な絵ですみません。。。

因みに、図のState1とState2は別物となります。
Reduxでは、State（状態）は、上書きせず、新たに作成するようになります。

【実装の流れ】

以下の流れで、実装を行っていきます。
①Stateの作成
②Stateの初期化
③Actionの作成
④Reducerの作成
⑤Reactへ反映

①Stateの作成

アプリ内で、現状保持しているデータが何か？を格納するための箱のようなもので、MVCモデルで言うとこの、Modelとなります。

authTypes.ts

/* ログインする際のユーザIDとPWを格納するためのデータ型 */
export interface LOGIN_CREDENTIAL{
    usercd: string;
    password: string;
}

②Stateの初期化

当アプリの画面に遷移した際に、初期値に何を挿入しておくか？を決めます。

authSlice.ts

const initialState: LOGIN_CREDENTIAL = {
    usercd: "",
    password:""
}

③Actionの作成

対象画面上で、何かイベントが発生した際に、どのような動作を行うか？を記載します。

authSlice.ts

/* 認証のための非同期関数(Action) */
export const fetchAsyncLogin = createAsyncThunk(
    "auth/login",
    async (auth: LOGIN_CREDENTIAL) => {
        const res = await axios.post<JWT_ACCESS>(
            `${process.env.APP_API_URL}/api/auth/token`,
            auth,
            {
                headers: {
                    "Content-Type": "multipart/form-data",
                },
            }
        );
        
        return res.data;
    }
);

④Reducerの作成

対象画面上で、イベントが発生し、Actionが作成された際、新しいState(状態)を作成してくれる処理となります。
MVCモデルで言うとこの、Controllerとなります。

authSlice.ts

//Reducerの作成
export const authSlice = createSlice({
    name:"auth",
    initialState,
    reducers: {
        //Stateの更新
        init_Credential(state) {
            state.usercd = "";
            state.password = "";
        }
    },
    extraReducers: (builder) => {
        //fetchAsyncLoginが成功した場合の処理
        builder.addCase(
            fetchAsyncLogin.fulfilled,
            (state, action: PayloadAction<JWT_ACCESS>) => {
                //cookieにサーバサイドから取得したJWTを保存する。
                setCookie("accesstoken", action.payload);
                action.payload.accesstoken && (window.location.href="/tasks")
            }
        );
    }
})

以上の内容が、AuthSlice.ts内に記載する内容となります。
Reduxをアプリ上で利用するための下準備のような感じです。

⑤Reactへ反映

そして、ここからが（と言っても1つだけですが。。。）Reactアプリで、Reduxを利用するための処理となります。
Reduxを作成しただけでは、イベントが発生しても、Reduxを呼び出すことができません。Reactとreduxを紐づけることで、初めて状態管理が出来るようになります。

Auth_login.tsx

    const dispatch = useDispatch();
    const login = async () => {
        await dispatch(fetchAsyncLogin(credential));
    }

参考にしたサイト

今回は、ここまでとなります。