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 获取数据。

약속 <🎜 🎜>