상태 관리: Redux 툴킷 React JS

Redux Toolkit은 React 애플리케이션의 전역 상태 관리를 단순화합니다. 이 기사에서는 저장소 구성, 슬라이스, 썽크를 사용한 비동기 작업을 포함하여 Redux Toolkit을 사용하여 인증 시스템을 구현하는 방법을 살펴보겠습니다.

1. Redux Store 구성
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는 여러 리듀서를 병합하여 애플리케이션을 모듈식으로 유지합니다.
• Provider는 Redux 스토어 전체에 액세스할 수 있도록 앱을 래핑합니다.

2. 루트 리듀서 생성
루트 리듀서는 다양한 슬라이스를 결합하여 전역 상태를 관리합니다. 여기에는 인증을 위한 인증 슬라이스가 포함되어 있습니다.

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, 로딩 및 오류와 같은 속성을 정의합니다.
• extraReducers: 비동기 작업(보류 중, 이행됨, 거부됨)을 처리합니다.
• 토큰 데이터는 사용자 세션 관리를 위해 localStorage에 저장됩니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!