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

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 호출과 같은 부작용을 처리하고 리듀서를 사용하여 작업을 조정합니다.

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

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

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

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

2. 리듀서: 업데이트 상태

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

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

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

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

3. Sagas: 부작용 관리

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

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;

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

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

4. 후크: 구성요소 연결

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

// 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,
  };
};

작동 방식

• 액션 배포: 구성 요소는 사용자 정의 후크에서 changePasswordCall을 호출합니다.
• 리듀서: changePassword 작업은 상태를 업데이트하여 요청이 진행 중임을 나타냅니다.
• Saga: Watcher Saga는 changePassword을 듣고 Worker Saga를 트리거합니다.
• API 호출: 작업자 사가는 ChangePassword API를 호출하고 응답을 처리합니다.
• 상태 업데이트: Saga는 성공 또는 실패 동작을 배포하고 감속기를 통해 상태를 업데이트합니다.

요약

이 설정은 API 워크플로를 명확하고 관리 가능한 단계로 구성합니다.

• 서비스는 API 로직을 처리합니다.
• 리듀서 업데이트 상태.
• Saga는 부작용을 처리하고 모든 것을 하나로 묶습니다.

이것은 프로젝트를 구성하는 한 가지 방법일 뿐이라는 점을 기억하세요. 더 많은 경험이나 아이디어가 있다면, 여러분의 전략을 자유롭게 댓글로 남겨주세요. 나는 배우고 발전하면서 향후 기사에서 사가에 대해 더 많이 다룰 것입니다.

즐거운 프로그래밍 되세요! ?

위 내용은 API 호출을 위한 Redux Saga 흐름을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!