状態管理: Redux ツールキット React JS

Redux Toolkit は、React アプリケーションのグローバルな状態管理を簡素化します。この記事では、Redux Toolkit を使用して、ストア構成、スライス、サンクによる非同期アクションなどの認証システムを実装する方法を検討します。

1. Redux ストアの構成
Redux ストアは、configureStore を使用して設定されます。 app.tsx では、グローバル リデューサー、ミドルウェアをセットアップし、デバッグ用の開発者ツールを有効にします。

import { lazy } from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from "react-redux";
import { combineReducers, configureStore } from '@reduxjs/toolkit';
import { rootReducer } from './slice';
import { setupAxios } from './_metronic/helpers/Axios';
import axios from 'axios';
import { thunk } from 'redux-thunk';

setupAxios(axios);

const AppRoutes = lazy(() => import('./routers/AppRoutes'));

const store = configureStore({
  reducer: combineReducers({
    masterState: rootReducer,
  }),
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(thunk),
  devTools: true,
});

createRoot(document.getElementById('root')!).render(
  <Provider store={store}>
    <AppRoutes />
  </Provider>
);

• setupAxios は、リクエスト インターセプターなどの必要な構成で Axios を初期化します。
• combineReducers は複数の Reducer をマージし、アプリケーションのモジュール化を維持します。
• Provider はアプリをラップして、Redux ストア全体にアクセスできるようにします。

2.ルート レデューサーの作成
ルート リデューサーは、さまざまなスライスを組み合わせてグローバル状態を管理します。ここでは、認証用の auth スライスを含めます。

import { AuthReducer } from "#/modules/auth/store/auth.slice";
import { combineReducers } from "redux";

export const rootReducer = combineReducers({
  Auth: AuthReducer,
});

Authslice は、createSlice を使用して定義される認証固有の状態を処理します。

3.認証スライスの定義
createSlice を使用して、非同期アクションを処理するための状態構造、同期レデューサー、および extraReducer を定義します。

import { createSlice } from "@reduxjs/toolkit";
import { AuthState, initialAuthState } from "../model/authModel";
import { setLocalStorageData } from "#/_metronic/helpers/localstorage/accessToken";
import { AUTH_KEY, REFRESH_KEY } from "#/_metronic/helpers/env";
import { login } from "./auth.asyncAction";

const initialState: AuthState = initialAuthState;

export const authSlice = createSlice({
  name: "auth",
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(login.pending, (state) => {
        state.loading = true;
        state.error = undefined;
        state.isSubmitting = true;
      })
      .addCase(login.fulfilled, (state, action) => {
        const { payload }: any = action;
        if (payload?.status === 'Error') {
          state.error = payload?.message || payload;
        } else {
          state.success = true;
          state.isLogin = true;
          setLocalStorageData(AUTH_KEY, payload?.api_token);
          setLocalStorageData(REFRESH_KEY, payload?.refreshToken);
        }
        state.loading = false;
        state.isSubmitting = false;
      })
      .addCase(login.rejected, (state, action) => {
        const { payload }: any = action;
        state.loading = false;
        state.error = payload?.data || payload;
        state.isSubmitting = false;
      });
  },
});

export const { reducer: AuthReducer } = authSlice;

• 初期状態: isLogin、loading、error などのプロパティを定義します。
• extraReducers: 非同期アクション (保留中、完了、拒否) を処理します。
• トークン データは、ユーザー セッションを管理するためにローカル ストレージに保存されます。

4. createAsyncThunk
を使用して非同期アクションを作成する ログイン非同期アクションは、API と対話してユーザー認証を処理します。

import { createAsyncThunk } from "@reduxjs/toolkit";
import { doLogin } from "../api/auth_api";

export const login = createAsyncThunk('login', async (payload: any, { rejectWithValue }) => {
  try {
    return await doLogin(payload);
  } catch (error: any) {
    return rejectWithValue(error?.data || error);
  }
});

アクションは API を呼び出し、rejectWithValue を使用して応答またはエラーを処理します。

5.認証 API の作成
API レイヤーは Axios を使用してバックエンドと通信します。ログインリクエストの実装は次のとおりです。

import axios from 'axios';
import { ILogin, UserModel } from '../model/authModel';
import { BASE_URL } from '#/_metronic/helpers/env';

export const AUTH_URL = `${BASE_URL}/auth`;

export const doLogin = (payload: ILogin) => axios.post<UserModel>(AUTH_URL, payload);

• AUTH_URL は認証エンドポイントを指定します。
• doLogins はユーザー認証情報を含む POST リクエストを送信し、サーバーの応答を返します。

Redux Toolkit を使用すると、特にユーザー認証などの複雑なワークフローの処理において、グローバル状態の管理が合理化されます。実装をより小さなモジュール (ストア、スライス、API) に分割することで、React アプリケーションのスケーラビリティと保守性を確保します。

以上が状態管理: Redux ツールキット React JSの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。