Pengurusan Negeri: Redux Toolkit React JS-tutorial js-php.cn

Pengurusan Negeri: Redux Toolkit React JS

DDD

Lepaskan： 2024-12-01 03:30:09

asal

518 orang telah melayarinya

State Management: Redux Toolkit React JS

Redux Toolkit memudahkan pengurusan keadaan global dalam aplikasi React. Dalam artikel ini, kami akan meneroka cara melaksanakan sistem pengesahan menggunakan Redux Toolkit, termasuk konfigurasi kedai, kepingan dan tindakan async dengan thunks.

1. Mengkonfigurasi Redux Store
Kedai Redux dikonfigurasikan menggunakan configureStore. Dalam app.tsx, kami menyediakan pengurang global, perisian tengah dan mendayakan alatan pembangun untuk nyahpepijat.

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

Salin selepas log masuk

setupAxiosinisial Axios dengan sebarang konfigurasi yang diperlukan, seperti pemintas permintaan.
combineReducersmerges berbilang pengurang, mengekalkan aplikasi modular.
Penyedia membungkus apl untuk menjadikan gedung Redux boleh diakses di seluruh dunia.

2. Mencipta Pengurangan Akar
Pengurangan akar menguruskan keadaan global dengan menggabungkan kepingan yang berbeza. Di sini, kami menyertakan kepingan pengesahan untuk pengesahan.

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

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

Salin selepas log masuk

Authslice mengendalikan keadaan khusus pengesahan, yang ditakrifkan menggunakan createSlice.

3. Mentakrifkan Slice Pengesahan
Menggunakan createSlice, kami mentakrifkan struktur keadaan, pengurang segerak dan extraReducers untuk mengendalikan tindakan async.

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;

Salin selepas log masuk

Keadaan Awal: Mentakrifkan sifat seperti isLogin, memuatkan dan ralat.
extraReducers: Mengendalikan tindakan async (belum selesai, dipenuhi, ditolak).
Data token disimpan ke localStorageuntuk mengurus sesi pengguna.

4. Mencipta Tindakan Async dengan createAsyncThunk
Tindakan async log masuk berinteraksi dengan API untuk mengendalikan pengesahan pengguna.

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

Salin selepas log masuk

Tindakan memanggil API dan memproses respons atau ralat dengan rejectWithValue.

5. Mencipta API Pengesahan
Lapisan API menggunakan Axios untuk berkomunikasi dengan bahagian belakang. Berikut ialah pelaksanaan untuk permintaan log masuk.

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

Salin selepas log masuk

AUTH_URLmenentukan titik akhir pengesahan.
doLoginmenghantar POSTrequest dengan bukti kelayakan pengguna dan mengembalikan respons pelayan.

Dengan Redux Toolkit, pengurusan keadaan global menjadi diperkemas, terutamanya untuk mengendalikan aliran kerja yang kompleks seperti pengesahan pengguna. Dengan memecahkan pelaksanaan kepada modul yang lebih kecil (stor, slice dan API), kami memastikan kebolehskalaan dan kebolehselenggaraan dalam aplikasi React kami.

Atas ialah kandungan terperinci Pengurusan Negeri: Redux Toolkit React JS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!