Gestion de l'état : Redux Toolkit React JS

Redux Toolkit simplifie la gestion globale de l'état dans les applications React. Dans cet article, nous explorerons comment implémenter un système d'authentification à l'aide de Redux Toolkit, y compris la configuration du magasin, les tranches et les actions asynchrones avec thunks.

1. Configuration du Redux Store
Le magasin Redux est configuré à l'aide de configureStore. Dans app.tsx, nous avons mis en place un réducteur global, un middleware et activé les outils de développement pour le débogage.

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

• setupAxiosinitialise Axios avec toute configuration requise, telle que les intercepteurs de requêtes.
• combineReducersfusionne plusieurs réducteurs, gardant l'application modulaire.
• Providerenveloppe l'application pour rendre la boutique Redux accessible partout.

2. Création du réducteur de racine
Le réducteur racine gère l'état global en combinant différentes tranches. Ici, nous incluons une tranche d'authentification pour l'authentification.

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

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

L'Authslice gère l'état spécifique à l'authentification, qui est défini à l'aide de createSlice.

3. Définir la tranche d'authentification
À l'aide de createSlice, nous définissons la structure d'état, les réducteurs synchrones et les extraReducers pour gérer les actions asynchrones.

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;

• État initial : définit des propriétés telles que isLogin, chargement et erreur.
• extraReducers : gère les actions asynchrones (en attente, exécutées, rejetées).
• Les données des jetons sont enregistrées dans localStoragepour gérer les sessions utilisateur.

4. Création d'actions asynchrones avec createAsyncThunk
L'action de connexion asynchrone interagit avec une API pour gérer l'authentification des utilisateurs.

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

L'action appelle l'API et traite les réponses ou les erreurs avec rejetWithValue.

5. Création de l'API d'authentification
La couche API utilise Axios pour communiquer avec le backend. Voici l'implémentation pour la demande de connexion.

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_URLspécifie le point de terminaison d'authentification.
• doLoginsenvoie une requête POST avec les informations d'identification de l'utilisateur et renvoie la réponse du serveur.

Avec Redux Toolkit, la gestion de l'état global devient rationalisée, en particulier pour la gestion de flux de travail complexes comme l'authentification des utilisateurs. En divisant l'implémentation en modules plus petits (store, slice et API), nous garantissons l'évolutivité et la maintenabilité de nos applications React.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!