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 응용 프로그램에서 구체적으로 빌드하는 방법을 살펴 보겠습니다.
에서 (첫 번째 API 응답)
끝점이 라고 가정하십시오. 그것은 도시를 응답에 포함시킬 것입니다. 응답은 객체가 될 것입니다 :
> 2. 사용자 City
를 기준으로, 우리는 모든 식당을 City 에 얻을 것입니다.
끝점이 라고 가정하십시오. 응답은 배열이 될 것입니다 :
userDetails 첫 번째 요청이 완료된 후에 만 두 번째 요청을 할 수 있음을 기억하십시오 (첫 번째 요청에 따라 다름). 다양한 방법을 살펴 보겠습니다 : 약속 또는 비동기/ 와 직접 기다립니다
Redux Thunk 사용
Redux-Saga 사용
Redux Observables를 사용하는 /details I는 대규모 프로젝트에서 가장 일반적으로 사용되는 방법이기 때문에 위의 방법을 구체적으로 선택했습니다. 특정 작업에 더 구체적 일 수 있으며 복잡한 응용 프로그램에 필요한 모든 기능이없는 다른 방법이 여전히 있습니다 (예 : ).
는 자동으로 레스토랑 목록을 다시 렌더링하고로드합니다. /restuarants/:city
Async/Await은 비동기 작업을 수행하는 데 사용할 수있는 새로운 구현입니다. 예를 들어, 동일한 함수는 다음과 같이 달성 할 수 있습니다.
두 방법 모두 가장 쉬운 방법입니다. 전체 논리가 구성 요소 내부에 있으므로 구성 요소가로드 된 후에 모든 데이터를 한 번에 쉽게 가져올 수 있습니다.
userDetails: {
…
city: 'city',
…
};
로그인 후 복사
이 방법의 단점 <🎜 🎜>
복잡한 데이터 기반 상호 작용이 발생할 때 문제가 발생합니다. 예를 들어, 다음 상황을 고려하십시오.
<<>
우리는 네트워크 요청에 의해 JS를 실행하는 스레드가 차단되기를 원하지 않습니다.
위의 모든 상황은 코드를 매우 복잡하고 유지 관리 및 테스트하기가 어렵습니다.
또한, 응용 프로그램의 흐름을 변경하려면 구성 요소에서 모든 페치 작업을 제거해야하기 때문에 확장 성은 큰 문제가 될 것입니다.
구성 요소가 부모-자식 나무 위에 있으면 무엇을 할 것인지 상상해보십시오. 그런 다음 데이터에 의존하는 모든 표현 구성 요소를 변경해야합니다.
또한 전체 비즈니스 로직은 구성 요소 내부에 있습니다.
우리는 어떻게 개선합니까?
글로벌 스토리지를 사용한 상태 관리는 실제로 이러한 경우 문제의 절반을 해결할 수 있습니다. 우리는 Redux를 글로벌 스토리지로 사용할 것입니다.
구성 요소에서 비즈니스 논리를 이동하는 것을 고려하면 비즈니스 로직을 올바른 위치로 이동하십시오. 정확히 어디서 할 수 있습니까? 행동에서? 감속기에서? 미들웨어를 통해? Redux의 아키텍처는 동기입니다. 작업 (JS 객체)을 배포하고 스토리지에 도달하면 감속기가 작동합니다.
비동기 코드를 실행하는 별도의 스레드가 있는지 확인하고 구독
에 의해 글로벌 상태에 대한 변경 사항을 검색 할 수 있는지 확인하십시오.
<<>
이로부터 우리는 모든 획득 논리를 감소기 (즉, 조치 또는 미들웨어) 앞에 이동하면 올바른 시간에 올바른 작업을 배포 할 수 있음을 알 수 있습니다. 예를 들어, 페치가 시작되면
당신이 볼 수 있듯이, 우리는 이제 어떤 유형의 행동이 배포되는지 잘 통제 할 수 있습니다. 각 함수 호출 (예 : , , 및
이 작업을 수행하려면 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를 사용하는 것은 유익합니다 :
우리는 특정 작업에 따라 사가를 구축하고 그룹화 할 수 있습니다. 우리는 단순히 행동을 배포함으로써 다른 사가에서 사가를 트리거 할 수 있습니다.
키 포인트 
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
