状態管理: Redux ツールキット React JS-jsチュートリアル-php.cn

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

DDD

リリース： 2024-12-01 03:30:09

オリジナル

517 人が閲覧しました

State Management: Redux Toolkit 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);

ログイン後にコピー