Zustandsverwaltung: Redux Toolkit React JS

Redux Toolkit vereinfacht die globale Statusverwaltung in React-Anwendungen. In diesem Artikel erfahren Sie, wie Sie mit Redux Toolkit ein Authentifizierungssystem implementieren, einschließlich Speicherkonfiguration, Slices und asynchronen Aktionen mit Thunks.

1. Konfigurieren des Redux Store
Der Redux-Store wird mit configureStore konfiguriert. In app.tsx richten wir einen globalen Reduzierer und Middleware ein und aktivieren Entwicklertools für das Debuggen.

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>
);

• setupAxiosinitialisiert Axios mit jeder erforderlichen Konfiguration, z. B. Anforderungsinterceptoren.
• CombineReducers führt mehrere Reduzierer zusammen und hält die Anwendung modular.
• Der Anbieter verpackt die App, um den Redux-Store durchgehend zugänglich zu machen.

2. Erstellen des Root Reducer
Der Root-Reducer verwaltet den globalen Status durch die Kombination verschiedener Slices. Hier fügen wir einen Auth-Slice zur Authentifizierung ein.

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

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

Der Authslice verwaltet den authentifizierungsspezifischen Status, der mit createSlice definiert wird.

3. Definieren des Authentifizierungsabschnitts
Mit createSlice definieren wir die Zustandsstruktur, synchrone Reduzierer und extraReducer, um asynchrone Aktionen zu verarbeiten.

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;

• Anfangszustand: Definiert Eigenschaften wie „isLogin“, „loading“ und „error“.
• extraReducers: Verarbeitet asynchrone Aktionen (ausstehend, erfüllt, abgelehnt).
• Token-Daten werden zur Verwaltung von Benutzersitzungen im lokalen Speicher gespeichert.

4. Asynchrone Aktionen mit createAsyncThunk erstellen
Die asynchrone Anmeldeaktion interagiert mit einer API, um die Benutzerauthentifizierung durchzuführen.

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);
  }
});

Die Aktion ruft die API auf und verarbeitet Antworten oder Fehler mit „rejectWithValue“.

5. Erstellen der Authentifizierungs-API
Die API-Schicht nutzt Axios zur Kommunikation mit dem Backend. Hier ist die Implementierung für die Anmeldeanforderung.

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 gibt den Authentifizierungsendpunkt an.
• doLogins sendet eine POST-Anfrage mit Benutzeranmeldeinformationen und gibt die Antwort des Servers zurück.

Mit Redux Toolkit wird die Verwaltung des globalen Status rationalisiert, insbesondere für die Handhabung komplexer Arbeitsabläufe wie der Benutzerauthentifizierung. Durch die Aufteilung der Implementierung in kleinere Module (Store, Slice und API) stellen wir Skalierbarkeit und Wartbarkeit in unseren React-Anwendungen sicher.

Das obige ist der detaillierte Inhalt vonZustandsverwaltung: Redux Toolkit React JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!