React Redux 애플리케이션에서 비동기 작업

키 포인트

JavaScript의 단일 스레드 특성은 API 호출과 같은 비동기 작업이 UIS를 비 블로킹하는 데 중요하며 이러한 작업의 효율적인 처리는 React Redux 애플리케이션에서 중요하다는 것을 의미합니다. Redux Thunk, Redux-Saga, and Redux-Observables are popular Redux asynchronous operation management middleware, each providing different advantages based on the complexity and needs of the application.

• Redux Thunk simplifies asynchronous action distribution by allowing return functions instead of action, enabling sequential API calls and processing related data in these functions.
Redux-SAGA는 ES6 생성기를 활용하여 레이스 조건 처리, 일시 정지 및 작업 취소와 같은 복잡한 시나리오에 대한보다 강력한 솔루션을 제공하여 대규모 응용 프로그램에 적합합니다.
• Redux-Observables는 RXJ를 활용하여 동작 흐름을 통해 부작용을 관리하는 강력한 방법을 제공하여 복잡한 애플리케이션 아키텍처에서 우수한 확장 성과 비동기 작업에 대한 제어를 제공합니다.
• 이 기사는 원래 Codebrahma에 출판되었습니다.
JavaScript는 단일 스레드 프로그래밍 언어입니다. 즉, 다음 코드를 쓸 때 ...

왜 여기에 API 호출 (네트워크 요청) 만 표시하는 이유는 무엇입니까? 다른 비동기 작업은 어떻습니까? API 호출은 비동기 작업을 처리하는 방법을 설명하는 매우 간단하고 유용한 예입니다.

, 성능 집약적 인 컴퓨팅, 이미지 로딩 및 이벤트 중심 작업과 같은 다른 작업이 있습니다. 응용 프로그램을 구축 할 때는 비동기 실행이 구조에 어떤 영향을 미치는지 고려해야합니다. 예를 들어, 를 브라우저에서 API 호출 (네트워크 요청)을 수행하는 함수로 생각하십시오. (AJAX 요청 여부를 무시하십시오. 동작을 비동기식 또는 동기로 취급하십시오.) 서버에서 요청이 처리 될 때 시간이 기본 스레드에서 발생하지 않습니다. 따라서 JS 코드는 계속 실행되며 요청이 응답을 반환하면 스레드를 업데이트합니다. <:>이 코드를 고려하십시오 :

이 경우,

는 비동기식이기 때문에 를 얻으려고 할 때 를 가지지 않을 것입니다. 따라서 첫 번째 행이 응답을 반환 한 후에 만 ​​두 번째 행이 실행되도록하는 방식으로 빌드해야합니다.

대부분의 최신 네트워크 요청 구현은 비동기입니다. 그러나 후속 API 호출에 대한 이전 API 응답 데이터에 의존하기 때문에 항상 작동하지는 않습니다. Reactjs/Redux 응용 프로그램에서 구체적으로 빌드하는 방법을 살펴 보겠습니다.

React는 사용자 인터페이스를 생성하기위한 프론트 엔드 라이브러리입니다. Redux는 응용 프로그램의 전체 상태를 관리하는 상태 컨테이너입니다. Redux와의 React를 사용하면 효율적이고 확장 가능한 응용 프로그램을 만들 수 있습니다. 이러한 RECT 응용 프로그램에서는 비동기 작업을 구축하는 몇 가지 방법이 있습니다. 각 방법에 대해 다음 요인 측면에서 장점과 단점을 논의 할 것입니다.

코드 명확성

확장 성

처리가 쉬운 오류

각 방법에 대해이 두 개의 API 호출을 실행합니다. > 1. get

city

에서 (첫 번째 API 응답) 끝점이 라고 가정하십시오. 그것은 도시를 응답에 포함시킬 것입니다. 응답은 객체가 될 것입니다 : > 2. 사용자 City

를 기준으로, 우리는 모든 식당을 City 에 얻을 것입니다. 끝점이 라고 가정하십시오. 응답은 배열이 될 것입니다 :

userDetails 첫 번째 요청이 완료된 후에 만 ​​두 번째 요청을 할 수 있음을 기억하십시오 (첫 번째 요청에 따라 다름). 다양한 방법을 살펴 보겠습니다 : 약속 또는 비동기/ 와 직접 기다립니다 Redux Thunk 사용 Redux-Saga 사용 Redux Observables를 사용하는 /details I는 대규모 프로젝트에서 가장 일반적으로 사용되는 방법이기 때문에 위의 방법을 구체적으로 선택했습니다. 특정 작업에 더 구체적 일 수 있으며 복잡한 응용 프로그램에 필요한 모든 기능이없는 다른 방법이 여전히 있습니다 (예 : ).

userId = fetch(userEndPoint); // 从 userEndpoint 获取 userId
userDetails = fetch(userEndpoint, userId) // 为此特定 userId 获取数据。

약속

이런 식으로, 상태가 (인수로 인해) 변경되면 구성 요소

는 자동으로 레스토랑 목록을 다시 렌더링하고로드합니다. /restuarants/:city > Async/Await은 비동기 작업을 수행하는 데 사용할 수있는 새로운 구현입니다. 예를 들어, 동일한 함수는 다음과 같이 달성 할 수 있습니다.

두 방법 모두 가장 쉬운 방법입니다. 전체 논리가 구성 요소 내부에 있으므로 구성 요소가로드 된 후에 모든 데이터를 한 번에 쉽게 가져올 수 있습니다.

userDetails: {
  …
  city: 'city',
  …
};

이 방법의 단점 복잡한 데이터 기반 상호 작용이 발생할 때 문제가 발생합니다. 예를 들어, 다음 상황을 고려하십시오.

우리는 네트워크 요청에 의해 JS를 실행하는 스레드가 차단되기를 원하지 않습니다.

위의 모든 상황은 코드를 매우 복잡하고 유지 관리 및 테스트하기가 어렵습니다.
• 또한, 응용 프로그램의 흐름을 변경하려면 구성 요소에서 모든 페치 작업을 제거해야하기 때문에 확장 성은 큰 문제가 될 것입니다.
구성 요소가 부모-자식 나무 위에 있으면 무엇을 할 것인지 상상해보십시오. 그런 다음 데이터에 의존하는 모든 표현 구성 요소를 변경해야합니다.
• 또한 전체 비즈니스 로직은 구성 요소 내부에 있습니다.
• 우리는 어떻게 개선합니까?
글로벌 스토리지를 사용한 상태 관리는 실제로 이러한 경우 문제의 절반을 해결할 수 있습니다. 우리는 Redux를 글로벌 스토리지로 사용할 것입니다.

구성 요소에서 비즈니스 논리를 이동하는 것을 고려하면 비즈니스 로직을 올바른 위치로 이동하십시오. 정확히 어디서 할 수 있습니까? 행동에서? 감속기에서? 미들웨어를 통해? Redux의 아키텍처는 동기입니다. 작업 (JS 객체)을 배포하고 스토리지에 도달하면 감속기가 작동합니다.

비동기 코드를 실행하는 별도의 스레드가 있는지 확인하고 구독
1. 에 의해 글로벌 상태에 대한 변경 사항을 검색 할 수 있는지 확인하십시오.

2. 이로부터 우리는 모든 획득 논리를 감소기 (즉, 조치 또는 미들웨어) 앞에 이동하면 올바른 시간에 올바른 작업을 배포 할 수 있음을 알 수 있습니다. 예를 들어, 페치가 시작되면

   를 배포 할 수 있으며, 완료되면

   를 배포 할 수 있습니다.
React JS 응용 프로그램을 개발하고 싶습니까?
3. Redux Thunk 사용

Redux Thunk is a middleware for Redux. 기본적으로 우리는 객체 대신 동작 대신 함수를 반환 할 수 있습니다. 이것은 함수의 매개 변수로 및 를 제공함으로써 도움이됩니다. 우리는 를 사용하여 적시에 필요한 조치를 배포합니다. 이점은 다음과 같습니다. 함수 내에서 여러 분포를 허용합니다 비즈니스 논리 협회와의 연관성은 React 구성 요소에서 동작으로 이동됩니다.

이 예에서는 다음과 같은 작업을 다시 작성할 수 있습니다.

userId = fetch(userEndPoint); // 从 userEndpoint 获取 userId
userDetails = fetch(userEndpoint, userId) // 为此特定 userId 获取数据。

당신이 볼 수 있듯이, 우리는 이제 어떤 유형의 행동이 배포되는지 잘 통제 할 수 있습니다. 각 함수 호출 (예 : , , 및 이 작업을 수행하려면 React 구성 요소를 Redux에 연결하고 Redux 라이브러리를 사용하여 작업을 구성 요소에 바인딩해야합니다. 일단 완료되면, 우리는 단순히 fetchStarted()를 호출 할 수 있습니다.이 모든 작업을 처리하고 뷰어에 따라보기를 업데이트 할 수 있습니다. fetchUserDetailsSuccess() 확장 성을 위해 Redux Thunk는 비동기 동작의 복잡한 제어를 포함하지 않는 응용 분야에 사용될 수 있습니다. 또한 다음 섹션의 주제에 설명 된대로 다른 라이브러리와 완벽하게 작동합니다. fetchRestaurantsSuccess() 그러나 Redux Thunk를 사용하여 특정 작업을 수행하는 것은 여전히 ​​어렵습니다. 예를 들어, 중간 페치 작업을 일시 중지하거나 해당 호출이 여러 개있는 경우에만 최신 통화 만 허용하거나 다른 API 가이 데이터를 가져 와서 취소 해야하는 경우에만 최신 통화 만 허용해야합니다. fetchError() 우리는 여전히이를 구현할 수 있지만 정확하게 실행하는 것이 더 복잡 할 것입니다. 다른 라이브러리와 비교할 때 복잡한 작업의 코드 선명도는 약간 악화되고 유지하기가 더 어려울 것입니다.

Redux-Saga 사용 Redux-Saga Middleware를 사용하면 위의 대부분의 기능을 해결하기 위해 추가 이점을 얻을 수 있습니다. Redux-Saga는 ES6 발전기를 기반으로 개발되었습니다.

Redux-Saga는 다음과 같은 목표를 달성하는 데 도움이되는 API를 제공합니다. this.props.getRestaurants() 이벤트 차단, 일부 작업이 완료 될 때까지 같은 줄의 스레드 차단 비 블로킹 이벤트, 코드 비동기 여러 비동기 요청 간의 경쟁을 처리합니다 일시 중지/스로틀링/탈바운스 모든 작업

사가는 어떻게 작동합니까?

SAGA는 ES6 생성기와 Async/API의 조합을 사용하여 비동기 작업을 단순화합니다. 기본적으로 여러 API 호출을 할 수있는 별도의 스레드에서 작동합니다. 사용 케이스에 따라 각 호출을 동기 또는 비동기식으로 만들 수 있습니다. API는 요청이 응답을 반환 할 때까지 같은 줄에서 스레드를 대기 할 수있는 기능을 제공합니다. 그 외에도이 라이브러리는 다른 많은 API를 제공하여 API 요청을 매우 쉽게 처리 할 수 ​​있습니다.

이전 예를 고려하십시오. SAGA를 초기화하고 문서에 언급 된 내용을 기반으로 Redux로 구성하면 다음을 수행 할 수 있습니다.

따라서 유형의 간단한 동작을 사용하여 배포하면 Saga Middleware가 듣고 응답합니다. 실제로, 미들웨어는 아무런 작업도 사용하지 않습니다. 단지 다른 작업을 듣고 수행하며 필요한 경우 새로운 작업을 배포합니다. 이 아키텍처를 사용하면 여러 요청을 배포 할 수 있으며 각 요청은 다음을 설명합니다.

첫 번째 요청은 언제 시작됩니까? 첫 번째 요청은 언제 완료 될 것인가
• 두 번째 요청은 언제 시작됩니까?
<.> 등.
• 또한
의 장점을 볼 수 있습니다. 우리는 현재 API를 사용하여 차단 호출을 구현하고 있습니다. SAGA는 와 같은 다른 API를 제공하여 비 블로킹 호출을 구현합니다. 차단 및 비 블로킹 호출을 결합하여 응용 프로그램에 적합한 구조를 유지할 수 있습니다.
• 확장 ​​성이있는 Saga를 사용하는 것은 유익합니다 :
우리는 특정 작업에 따라 사가를 구축하고 그룹화 할 수 있습니다. 우리는 단순히 행동을 배포함으로써 다른 사가에서 사가를 트리거 할 수 있습니다.

그것이 미들웨어이기 때문에, 우리가 쓴 조치는 Thunk와 달리 일반적인 JS 객체가 될 것입니다.

우리는 사가 (미들웨어)에 비즈니스 로직을 넣었으므로 사가가 무엇을 할 수 있는지 알면 반응 부분을 이해하는 것이 훨씬 쉽습니다.

오류는 시도/캐치 모드를 통해 스토리지에 쉽게 모니터링하고 배포 할 수 있습니다.

fetchRestaurantSaga() Redux-Observables 사용 문서에 언급 된 바와 같이, "Epic은 Redux-Observable의 핵심 원시입니다"섹션 : call Epic은 액션 스트림을 수신하고 액션 스트림을 반환하는 함수입니다. 즉, Epic은 감속기가 수신 된 후 일반 Redux 분포 채널과 병렬로 실행됩니다. fork() 액션은 서사시가 수신하기 전에 항상 감속기를 통해 실행됩니다. 서사시는 다른 액션 스트림 만 받고 출력합니다. 이는 미들웨어에서 작업을 사용하지 않기 때문에 Redux-Saga와 유사합니다. 그것은 단지 다른 작업을 듣고 수행합니다.

우리의 작업에 대해서는 다음 코드를 간단히 쓸 수 있습니다.

처음에는 조금 혼란스러워 보일 수 있습니다. 그러나 RXJ를 더 많이 이해할수록 서사시를 더 쉽게 만들 수 있습니다.

SAGA와 마찬가지로, 우리는 여러 조치를 배포 할 수 있으며, 각 조치는 스레드가 현재있는 API 요청 체인의 어느 부분을 설명합니다.
• 확장 성 측면에서 특정 작업에 따라 서사시를 분할하거나 결합 할 수 있습니다. 따라서이 라이브러리는 확장 가능한 응용 프로그램을 구축하는 데 도움이 될 수 있습니다. 코드의 관찰 가능한 패턴을 이해하면 코드 선명도가 좋습니다.
내 선호도 사용할 라이브러리를 결정하는 방법은 무엇입니까? API 요청이 얼마나 복잡한 지에 따라 다릅니다.
• Redux-Saga와 Redux-Observable 중에서 선택하는 방법은 무엇입니까? 학습 생성기 또는 RXJ에 따라 다릅니다. 둘 다 다른 개념이지만 똑같이 충분합니다. 나는 어느 것이 당신에게 더 좋은지를 보려고 노력하는 것이 좋습니다.
API를 처리하기위한 비즈니스 논리를 어디에 두는가? 감속기 앞에 놓는 것이 가장 좋지만 구성 요소에는 그렇지 않습니다. 가장 좋은 방법은 미들웨어 (Saga 또는 Observable 사용)입니다.
Codebrahma에서 더 많은 React 개발 기사를 읽을 수 있습니다.
• 반응 빨간 애플리케이션에서 비동기 연산에 대한 FAQ Redux에서 비동기 작업을 처리하는 데 미들웨어의 역할은 무엇입니까?

  Redux의 미들웨어는 비동기 작업을 처리하는 데 중요한 역할을합니다. 분포 동작과 동작 사이에 타사 확장 지점을 제공합니다. 미들웨어는 작업을 기록, 수정 및 취소하고 다른 작업을 배포하는 데 사용될 수 있습니다. 비동기 작업의 맥락에서 Redux Thunk 또는 Redux Saga와 같은 미들웨어를 사용하면 작업 대신 기능을 반환하는 액션 제작자를 작성할 수 있습니다. 그런 다음이 기능을 사용하여 작업의 분포를 지연 시키거나 특정 조건이 충족 될 때만 동작 만 배포 할 수 있습니다.

  Redux Thunk는 비동기 작업을 관리하는 데 어떻게 도움이됩니까?
  Redux Thunk is a middleware that allows you to write action creators that return functions instead of action. Thunk는 특정 조건이 충족 될 때만 행동의 분포를 지연 시키거나 행동을 배포하는 데 사용될 수 있습니다. 이 기능은 Redux에서 비동기 작업을 처리하기위한 훌륭한 도구입니다. 예를 들어, API 호출의 시작을 나타내는 조치를 배포 한 다음 통화가 데이터 또는 오류 메시지를 반환 할 때 다른 조치를 배포 할 수 있습니다.

  Redux Thunk와 Redux Saga의 차이점은 무엇입니까?

  Redux Thunk and Redux Saga are both middleware for managing side effects in Redux, including asynchronous operations. 둘의 주요 차이점은 그들의 접근법입니다. Redux Thunk는 콜백 기능을 사용하여 비동기 작업을 처리하는 반면 Redux Saga는 발전기 기능과 더 선언적 인 방법을 사용합니다. 이로 인해 Redux Saga는 더 강력하고 유연하지만 더 복잡하게 만듭니다. 응용 프로그램에 간단한 비동기 작업이있는 경우 Redux Thunk가 충분할 수 있습니다. 그러나 레이스 조건, 취소 및 IF-ELSE 논리와 관련된보다 복잡한 시나리오의 경우 Redux Saga가 더 나은 선택 일 수 있습니다.

  Redux의 비동기 작업에서 오류를 처리하는 방법은 무엇입니까?

  redux에서 비동기 작업에서 오류 처리를 처리하기 위해 비동기 작업 중에 오류가 발생하면 동작을 배포 할 수 있습니다. 이 조치는 오류 메시지를 페이로드로 취할 수 있습니다. 그런 다음이 동작을 REDUR에서 처리하여 오류 메시지로 상태를 업데이트 할 수 있습니다. 이런 식으로 오류 메시지를 사용자에게 표시하거나 디버깅을 위해 녹화 할 수 있습니다.

  Redux에서 비동기 동작을 테스트하는 방법은 무엇입니까?

  Redux의 비동기 동작은 Redux Storage 및 API 통화를 조롱하여 테스트 할 수 있습니다. Redux Storage의 경우 와 같은 라이브러리를 사용할 수 있습니다. API 호출의 경우 또는 와 같은 라이브러리를 사용할 수 있습니다. 테스트에서 비동기 동작을 배포 한 다음 예상 조치가 올바른 페이로드로 배포되었다고 주장 할 수 있습니다.

  Redux에서 비동기 작업을 취소하는 방법은 무엇입니까?

  Redux Saga와 같은 미들웨어를 사용하여 Redux에서 비동기 작업을 취소 할 수 있습니다. Redux Saga는 발전기 기능을 사용하여

  효과를 사용하여 취소 할 수 있습니다.

  효과가 산출되면, 현재 효과가 취소 될 때까지 시작 지점에서 사가가 취소됩니다.

  Redux의 비동기 작업에서 레이스 조건을 처리하는 방법은 무엇입니까?

  Redux Saga와 같은 미들웨어는 Redux의 비동기 작업에서 레이스 조건을 처리하는 데 사용될 수 있습니다. Redux Saga는 동시 동작을 처리하는 데 사용할 수있는

  및

  와 같은 효과를 제공합니다. 예를 들어, 새로운 조치가 배포 될 때 이전에 시작된 사가 작업이 여전히 실행중인 경우 takeLatest는 작업을 취소합니다. takeEvery Redux Thunk와 함께 Async/Await를 사용하는 방법은 무엇입니까? takeLatest

  Redux Thunk natively supports async/await. 액션 제작자에서는 일반 기능 대신 비동기 기능을 반환 할 수 있습니다. 이 비동기 기능 내에서 비동기 작업을 처리하기 위해 비동기/대기 시간을 사용할 수 있습니다. 비동기 조작이 완료되면 함수를 동작 객체를 사용하여 호출 할 수 있습니다.

  Redux의 비동기 작업에서 로딩 상태를 처리하는 방법은 무엇입니까?

  Redux의 비동기 작업에서 로딩 상태는 비동기 작업 전후에 동작을 배포하여 처리 할 수 ​​있습니다. 작업 전에 배포 된 조치는로드 상태를 true로 설정할 수 있으며 작업 후 배포 된 작업은이를 False로 설정할 수 있습니다. REDICER에서 이러한 동작을 처리하여 스토리지의 부하 상태를 업데이트 할 수 있습니다.

  Redux의 부작용을 처리하는 방법은 무엇입니까? dispatch Redux의 부작용은 Redux Thunk 또는 Redux Saga와 같은 미들웨어를 사용하여 처리 할 수 ​​있습니다. 이 미들웨어를 사용하면 작업 대신 기능을 반환하는 액션 제작자를 작성할 수 있습니다. 이 기능은 비동기 작업, 로깅 및 조건부 배포 동작과 같은 부작용을 수행하는 데 사용될 수 있습니다.

위 내용은 React Redux 애플리케이션에서 비동기 작업의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!