Redux 툴킷: React Thunk 및 React Saga. Vishal Tiwari로부터 배우세요.-JS 튜토리얼-php.cn

Redux 툴킷: React Thunk 및 React Saga. Vishal Tiwari로부터 배우세요.

Patricia Arquette

풀어 주다： 2024-10-19 14:32:31

원래의

286명이 탐색했습니다.

Redux toolkit: React Thunk and React Saga.Learn from Vishal Tiwari.

React Thunk 및 React Saga는 특히 API 호출과 같은 비동기 작업을 관리하기 위해 React 애플리케이션의 부작용을 처리하기 위한 미들웨어 라이브러리입니다. 둘 다 일반적으로 Redux와 함께 사용되지만 약간 다른 목적과 접근 방식을 제공합니다.

리액트 썽크

1. 개요:

React Thunk는 액션 객체 대신 함수를 반환하는 액션 생성자를 작성할 수 있는 미들웨어입니다. 이는 API 요청이나 복잡한 동기 논리(예: 조건부 작업 디스패치)와 같은 비동기 작업을 처리하는 데 유용합니다. 반환된 함수는 디스패치 및 getState를 인수로 수신하므로 다른 작업을 디스패치하거나 함수 내 현재 상태에 액세스할 수 있습니다.

2. 주요 개념:

미들웨어: 썽크는 스토어의 기능(즉, 썽크) 처리 능력을 확장하는 미들웨어입니다.
비동기 액션: Thunk를 사용하면 액션 전달을 지연하거나 특정 상태나 논리에 따라 조건부로 전달할 수 있습니다.
간단함: Thunk는 비교적 간단하므로 대부분의 사용 사례에 쉽게 사용할 수 있습니다.

3. 작동 방식:

일반적으로 액션 생성자는 일반 JavaScript 개체(액션)를 반환합니다.
Thunk를 사용하면 액션 생성자가 디스패치 및 getState를 수신하는 함수("썽크")를 반환할 수 있습니다. 이 함수 내에서 비동기 논리(예: API에서 데이터 가져오기)를 수행한 다음 실제 작업을 전달할 수 있습니다.

4. 예:

다음은 React 앱에서 redux-thunk를 사용하는 방법에 대한 기본 예입니다.

   // Action Creator with Thunk
   export const fetchUser = () => {
     return async (dispatch) => {
       dispatch({ type: 'FETCH_USER_REQUEST' });
       try {
         const response = await fetch('/api/user');
         const data = await response.json();
         dispatch({ type: 'FETCH_USER_SUCCESS', payload: data });
       } catch (error) {
         dispatch({ type: 'FETCH_USER_FAILURE', payload: error });
       }
     };
   };

로그인 후 복사

5. 썽크의 장점:

단순성: Thunk는 이해하고 구현하기 쉽습니다.
작은 설치 공간: 가볍고 복잡한 구성이 필요하지 않습니다.
디스패치에 대한 직접적인 제어: 작업이 디스패치되는 시기와 방법을 더 효과적으로 제어할 수 있습니다.

6. 단점:

확장하기 어려움: 복잡한 비동기 흐름의 경우 Thunk는 중첩된 논리와 많은 디스패치 호출로 인해 지저분해질 수 있습니다.
간소한 구조: Thunk는 부작용 관리를 위한 특정 구조를 적용하지 않으므로 제대로 처리하지 않으면 일관되지 않은 코드가 발생할 수 있습니다.

리액트 사가

1. 개요:

React Saga는 제너레이터 함수를 사용하여 Side Effect를 보다 체계적으로 처리할 수 있는 미들웨어입니다. Thunk와 같은 함수를 반환하는 대신 "효과" 시스템을 사용하여 비동기 작업을 관리하고 논리 흐름을 제어합니다. Sagas는 전달된 작업을 수신하고 API 호출, 데이터 가져오기 및 기타 작업과 같은 부작용을 수행할 수 있는 장기 실행 백그라운드 프로세스입니다.

2. 주요 개념:

생성기 함수: Sagas는 동기식으로 보이는 비동기 코드를 작성할 수 있게 해주는 ES6 생성기 함수(function*)를 사용하여 구현됩니다.
감시자와 작업자: Sagas는 종종 "감시자" 사가(디스패치된 작업을 수신)와 "작업자" 사가(부작용 처리)로 구분됩니다.
Take, put, call: Redux-Saga는 부작용 생성 시기, 작업 전달 및 API 호출을 제어할 수 있는 효과 생성기(take, put, call 등)를 제공합니다.

3. 작동 방식:

Redux-Saga를 사용하면 부작용 처리를 담당하는 saga(장기 실행 백그라운드 작업)를 정의할 수 있습니다.
Sagas는 일반적으로 생성기 함수 및 call(함수 호출) 및 put(작업 전달)과 같은 산출 효과로 작성됩니다.
Saga는 take를 사용하여 특정 작업을 기다리거나 takeEvery 또는 takeLatest를 사용하여 모든 작업을 수신할 수도 있습니다.

4. 예:

다음은 redux-saga를 사용하는 방법에 대한 기본 예입니다.

   // Action Creator with Thunk
   export const fetchUser = () => {
     return async (dispatch) => {
       dispatch({ type: 'FETCH_USER_REQUEST' });
       try {
         const response = await fetch('/api/user');
         const data = await response.json();
         dispatch({ type: 'FETCH_USER_SUCCESS', payload: data });
       } catch (error) {
         dispatch({ type: 'FETCH_USER_FAILURE', payload: error });
       }
     };
   };

로그인 후 복사

5. Redux-Saga의 장점:

복잡한 부작용에 더 좋음: Saga의 효과 기반 접근 방식은 확장성이 뛰어나고 복잡한 비동기 흐름 관리(예: 재시도, 디바운싱 또는 계단식 API 호출 처리)에 적합합니다.
테스트 가능: Sagas는 생성기 기능을 중심으로 구축되었으므로 테스트하기 쉽습니다.
선언적: 효과를 사용하면 어떤 부작용이 발생할지 명확해지며 흐름을 더욱 예측 가능하게 됩니다.
취소 및 순서: Saga를 사용하면 진행 중인 작업을 쉽게 취소하거나 이벤트의 순서 흐름을 적용할 수 있습니다(예: 여러 작업을 기다리는 것).

6. 단점:

빠른 학습 곡선: 생성기 기능과 전반적인 사가 패턴을 사용하는 것은 초보자가 이해하기 어려울 수 있습니다.
오버헤드: 소규모 애플리케이션의 경우 Thunk와 같은 간단한 솔루션에 비해 과잉처럼 느껴질 수 있습니다.
상세: Sagas는 Thunk에 비해 더 많은 상용구 코드를 포함하는 경향이 있습니다.

비교: React Thunk와 React Saga

측면

Aspect	React Thunk	React Saga
Concept	Returns functions in action creators	Uses generator functions for side effects
Learning curve	Easier to learn and use	Higher learning curve due to generators
Asynchronous flow	Handles simple async logic	Better for complex async workflows
Code structure	Less structure, can get messy in large apps	Provides a clear, structured approach
Testing	Testing can be more challenging	Easier to test because of generators
Use cases	Simple async logic, API requests	Complex flows (e.g., sequences, retries)
Performance	Lightweight	More powerful, but slightly more overhead

반응 썽크 리액트 사가 콘셉트 액션 생성자의 함수를 반환합니다 부작용을 위해 생성기 기능을 사용합니다 학습 곡선 배우고 사용하기가 더 쉬워졌습니다 생성기로 인한 더 높은 학습 곡선 비동기 흐름 간단한 비동기 로직 처리 복잡한 비동기 작업흐름에 더 좋음 코드 구조 구조가 적고 대규모 앱에서 지저분해질 수 있음 명확하고 구조화된 접근 방식 제공 테스트 테스트가 더 어려울 수 있습니다 생성기로 인해 테스트가 더 쉽습니다 사용 사례 간단한 비동기 로직, API 요청 복잡한 흐름(예: 시퀀스, 재시도) 성능 경량 더 강력하지만 약간 더 많은 오버헤드

언제 어떤 것을 사용하나요?

React Thunk 사용 다음과 같은 경우:
- 귀하의 애플리케이션에는 기본 API 요청 및 조건에 따른 디스패치와 같은 비교적 간단한 비동기 요구사항이 있습니다.
- 많은 상용구 없이 가볍고 이해하기 쉬운 솔루션을 원합니다.
React Saga를 사용하세요 다음과 같은 경우에
- 재시도, 작업 순서 지정, 경합 조건 또는 서로 의존하는 여러 작업과 같은 보다 복잡한 비동기 흐름을 관리해야 합니다.
- 선언적 접근 방식을 선호하고 부작용에 대한 더 나은 제어를 원합니다.
- 앱에는 장기적으로 더 나은 테스트 가능성과 코드 유지 관리 기능이 필요합니다.