API 호출을 위한 Redux Saga 흐름을 만드는 방법은 무엇입니까?-JS 튜토리얼-php.cn

API 호출을 위한 Redux Saga 흐름을 만드는 방법은 무엇입니까?

Susan Sarandon

풀어 주다： 2025-01-20 02:37:13

원래의

366명이 탐색했습니다.

How to make a Redux Saga flow for API calls?

Redux Saga를 사용하여 React/React 네이티브 프로젝트의 API 워크플로 단순화

이 글은 전문가 가이드는 아니지만 Redux Saga를 활용하여 React 또는 React Native 프로젝트의 부작용을 처리하는 방법을 설명하려고 합니다. 애플리케이션에 많은 API 호출이 포함된 경우 Redux Saga는 프로세스를 단순화하고 코드를 보다 관리하기 쉽게 만들 수 있습니다.

Redux Saga를 선택하는 이유는 무엇인가요?

Redux Saga는 API 호출 등의 부작용을 명확하고 예측 가능한 방식으로 관리하는 미들웨어입니다. 구성요소나 리듀서에 API 로직을 채우는 대신 이러한 작업을 Saga에 위임할 수 있습니다. Saga를 사용하면 생성기라고 불리는 특수 JavaScript 함수를 사용하여 동기식으로 보이는 비동기 코드를 작성할 수 있습니다.

폴더 구조 설정

사가에 대해 자세히 알아보기 전에 확장할 수 있도록 프로젝트를 구성하세요. 제가 따르는 기본 구조는 다음과 같습니다.

서비스: API 엔드포인트와 이를 호출하는 함수가 포함되어 있습니다.
리듀서: API 응답을 기반으로 상태 변경을 관리합니다.
Sagas: API 호출과 같은 부작용을 처리하고 리듀서를 사용하여 작업을 조정합니다.

서비스: API 엔드포인트 처리

서비스 폴더에는 재사용 가능한 API 호출 기능이 포함되어 있습니다. 다음은 "비밀번호 변경" API의 예입니다.

<code class="language-javascript">// ChangePasswordService.js
import {Constants} from '../../Config';
import Ajax from './base';

const BASE_URL = Constants.IS_DEVELOPING_MODE
  ? Constants.BASE_URL.DEV
  : Constants.BASE_URL.PROD;

export default {
  ChangePassword: async params => {
    return fetch(`${BASE_URL}api/change-password`, {
      method: 'POST',
      body: params,
      headers: {
        Accept: 'multipart/form-data',
      },
    })
      .then(response => Ajax.handleResponse(response))
      .then(data => {
        console.log('Data', data);
        return data;
      });
  },
};</code>

로그인 후 복사

여기에서는 API 호출을 위한 ChangePassword 함수를 정의합니다. fetch를 사용하여 엔드포인트에 POST 요청을 보내고 도우미 함수(Ajax.handleResponse)를 사용하여 응답을 처리합니다.

리듀서: 업데이트 상태

Reducer는 전달된 작업을 수신하고 그에 따라 상태를 업데이트합니다. 비밀번호 변경 관리를 위한 리듀서는 다음과 같습니다.

<code class="language-javascript">// PasswordChangeSlice.js
import {createSlice} from '@reduxjs/toolkit';

const passwordChangeSlice = createSlice({
  name: 'passwordChange',
  initialState: {
    data: null,
    isChangeSuccess: null,
    error: null,
    message: null,
  },
  reducers: {
    changePassword: state => {
      state.isChangeSuccess = null;
      state.error = null;
      state.message = '';
    },
    changePasswordSuccess: (state, action) => {
      state.data = action.payload;
      state.message = 'Password changed successfully';
      state.isChangeSuccess = true;
    },
    changePasswordFail: (state, action) => {
      state.error = action.payload;
      state.message = 'Something went wrong';
      state.isChangeSuccess = false;
    },
  },
});

export const {changePassword, changePasswordSuccess, changePasswordFail} =
  passwordChangeSlice.actions;

export default passwordChangeSlice.reducer;</code>

로그인 후 복사

이 감속기에는 세 가지 작업이 있습니다.

changePassword: 요청이 시작되면 상태를 재설정합니다.
changePasswordSuccess: 성공 데이터로 상태를 업데이트합니다.
changePasswordFail: 오류 정보로 상태를 업데이트합니다.

Sagas: 부작용 관리

이제 본론으로! Saga는 실제 API 호출을 처리하고 응답을 기반으로 작업을 전달합니다. 다음은 "비밀번호 변경" API에 대한 이야기입니다.

<code class="language-javascript">import {all, call, put, takeEvery} from 'redux-saga/effects';
import API from '../Services/ChangePasswordService';
import {
  changePasswordFail,
  changePasswordSuccess,
} from '../Reducers/PasswordChangeSlice';

function* changePasswordSaga({payload}) {
  try {
    const response = yield call(API.ChangePassword, payload);
    if (response?.data) {
      yield put(changePasswordSuccess(response.data));
    } else if (response?.errors) {
      yield put(changePasswordFail(response.errors));
    }
  } catch (error) {
    yield put(changePasswordFail(error.message));
  }
}

function* passwordSaga() {
  yield all([
    takeEvery('passwordChange/changePassword', changePasswordSaga),
  ]);
}

export default passwordSaga;</code>

로그인 후 복사

call: API 함수(API.ChangePassword)를 호출하고 결과를 기다립니다.
put: 상태를 업데이트하는 작업을 전달합니다.
takeEvery: 특정 동작(changePassword)을 듣고 해당 작업자 사가(changePasswordSaga)를 트리거합니다.

API 호출이 성공하면 사가는 changePasswordSuccess을 내보내고, 실패하면 changePasswordFail을 내보냅니다.

후크: 구성요소 연결

프로세스를 트리거하기 위해 changePassword 액션을 전달하는 사용자 정의 후크를 생성합니다.

<code class="language-javascript">// useChangePasswordActions.js
import {useDispatch, useSelector} from 'react-redux';
import {changePassword} from '../Reducers/PasswordChangeSlice';

export const useChangePasswordActions = () => {
  const dispatch = useDispatch();
  const passwordState = useSelector(state => state?.changePassword);

  const changePasswordCall = params => {
    dispatch(changePassword(params));
  };

  return {
    passwordState,
    changePasswordCall,
  };
};</code>

로그인 후 복사

작동 방식