Thunk Middleware 란 무엇입니까? 비동기 동작에 어떻게 사용합니까?-프런트엔드 Q&A-php.cn

Thunk Middleware 란 무엇입니까? 비동기 동작에 어떻게 사용합니까?

Thunk Middleware는 Redux의 인기있는 미들웨어로 액션 객체 대신 기능을 반환하는 액션 제작자를 작성할 수 있습니다. Thunks로 알려진 이러한 기능은 언제든지 동작을 파견 할 수있는 비동기 논리를 포함 할 수 있습니다. Thunk Middleware는 API 호출, 시간 초과 또는 기타 비 블로킹 작업과 같은 비동기 작업을 처리하는 데 특히 유용합니다.

비동기 동작을 위해 미들웨어를 사용하려면 다음을 수행하십시오.

Thunk Middleware 설치 : 먼저 NPM 또는 원사를 사용하여 redux-thunk 패키지를 설치해야합니다.

1
<code class="bash">npm install redux-thunk</code>
로그인 후 복사

상점에 덩어리 추가 : Redux 스토어 설정에서 Redux의 applyMiddleware 기능을 사용하여 Thunk Middleware를 적용하십시오.

1	`<code` `class="javascript">import { createStore, applyMiddleware } from` `'redux'; import thunk from` `'redux-thunk'; import rootReducer from` `'./reducers';` `const` `store = createStore(rootReducer, applyMiddleware(thunk));</code>`

로그인 후 복사

펑크 액션 제작자 만들기 : 기능을 반환하는 액션 제작자 (Thunks)를 작성하십시오. 이러한 기능은 비동기 연산을 처리하는 데 사용될 수 있으며 필요한 경우 여러 작업을 발산 할 수 있습니다.

<code class="javascript">function fetchUser(id) { return function(dispatch) { dispatch({ type: 'FETCH_USER_REQUEST' }); return fetch(`/api/users/${id}`) .then(response => response.json()) .then(json => { dispatch({ type: 'FETCH_USER_SUCCESS', payload: json }); }) .catch(error => { dispatch({ type: 'FETCH_USER_ERROR', payload: error }); }); }; }</code>

로그인 후 복사

THUNK ACTIONS 파견 : 구성 요소에 또는 비동기 동작을 트리거 해야하는 곳 에서이 펑크 액션 제작자를 파견 할 수 있습니다.

1
<code class="javascript">store.dispatch(fetchUser(123));</code>
로그인 후 복사

이 단계를 수행하면 Thunk Middleware를 활용하여 Redux 응용 프로그램에서 비동기 작업을 효과적으로 관리 할 수 있습니다.

Thunk Middleware는 어떻게 Redux에서 비동기 운영의 관리를 향상시킬 수 있습니까?

Thunk Middleware는 몇 가지 주요 이점을 제공함으로써 Redux의 비동기 운영 관리를 크게 향상시킵니다.

지연된 작업 파견 : Thunks는 API 호출과 같은 비동기 작업이 완료 될 때까지 동작 파견을 지연시킬 수 있습니다. 이를 통해 비동기 작업 결과에 따라 적절한 순간에 작업을 발송할 수 있습니다.
복잡한 논리 처리 : Tunks는 조건부 명세서 및 여러 발송을 포함한 복잡한 논리를 포함 할 수 있습니다. 이를 통해 로딩 상태 처리, 오류 및 성공 사례와 같은 응용 프로그램 상태를보다 정교한 관리 할 수 있습니다.
상점의 상태 및 발송 기능에 대한 액세스 : Thunk 내부에는 dispatch 기능과 getState 기능 모두에 액세스 할 수 있습니다. 이 액세스를 사용하면 해당 상태에 따라 현재 상태를 읽고 조건부로 파견 작업을 파견 할 수 있습니다.
재사용 가능성 : Thunk Action Creator는 응용 프로그램에서 재사용하여 더 깨끗하고 모듈 식 코드베이스를 홍보 할 수 있습니다. 쉽게 테스트하고 유지 관리 할 수있는 Thunk Action Creator에서 비동기 작업을 처리하기위한 논리를 중앙 집중화 할 수 있습니다.
쉬운 테스트 : Thunks를 사용하면 모의 데이터를 주입하고 테스트 중에 dispatch 기능을 조롱하여 비동기 작업을보다 쉽게 테스트 할 수 있습니다.

다른 Redux 미들웨어 옵션에 비해 Thunk Middleware를 사용하면 어떤 이점이 있습니까?

Thunk Middleware에는 다음과 같은 다른 Redux 미들웨어 옵션에 비해 몇 가지 이점이 있습니다.

단순성과 사용 편의성 : Thunk 미들웨어는 설정 및 사용이 간단합니다. redux-thunk 패키지 이외의 복잡한 구성 또는 추가 라이브러리가 필요하지 않습니다.
유연성 : Thunk Middleware를 사용하면 간단한 API 호출에서보다 복잡한 작업 시퀀스에 이르기까지 모든 유형의 비동기 작동을 처리 할 수 있습니다. 이러한 유연성은 광범위한 사용 사례에 적합합니다.
Redux와의 기본 통합 : Thunk Middleware는 기존 Redux 설정을 크게 변경할 필요없이 Redux 생태계에 완벽하게 맞습니다. 다른 Redux 도구 및 라이브러리와 잘 어울립니다.
파견 및 상태에 직접 액세스 : Thunks는 dispatch 및 getState 기능에 직접 액세스 할 수 있으므로 동작이 파견되는 방법과시기에 대한 더 많은 제어를 제공합니다.
커뮤니티 지원 및 문서화 : Thunk Middleware는 널리 사용되며 광범위한 커뮤니티 지원 및 문서를 보유하고있어 일반적인 문제에 대한 리소스 및 솔루션을보다 쉽게 찾을 수 있습니다.

이에 비해 redux-saga 또는 redux-observable 과 같은 다른 미들웨어 옵션은 부작용을 관리하기위한 고급 기능을 제공 할 수 있지만 가파른 학습 곡선과 더 복잡한 설정이 제공됩니다. Thunk Middleware는 단순성과 기능 사이의 균형이 잘 잡히기 때문에 많은 개발자에게 인기있는 선택이됩니다.

비동기 동작을 위해 펑크 미들웨어를 구현할 때 어떤 일반적인 함정을 피해야합니까?

비동기 동작을위한 펑크 미들웨어를 구현할 때는 피해야 할 몇 가지 일반적인 함정이 있습니다.

Thunks의 과도한 사용 : Thunks는 비동기 작업에 유용하지만 과도하게 사용하면 지나치게 복잡한 코드로 이어질 수 있습니다. 필요한 경우에만 펑크를 사용하고 동기화 된 작업을 위해 간단한 액션 제작자를 고려하십시오.
오류 처리를 무시하는 것 : 항상 싱크 내에서 오류를 처리합니다. 그렇게하지 않으면 응용 프로그램에서 처리되지 않은 약속 거부와 예기치 않은 행동으로 이어질 수 있습니다. 응용 프로그램의 상태를 적절하게 업데이트하기 위해 오류 조치를 발송하는지 확인하십시오.
상점 상태 무시 : Thunks는 getState 통해 상점의 상태에 액세스 할 수 있지만이를 사용하는 것을 무시하면 불필요한 API 호출 또는 작업으로 이어질 수 있습니다. 중복 작업을 피하기 위해 조치를 발송하기 전에 항상 현재 상태를 확인하십시오.
약속을 반환하는 것을 잊어 버리십시오 : 여러 덩어리를 체인하거나 구성 요소의 펑크 결과를 처리 해야하는 경우, 싱크 액션 제작자가 약속을 반환해야합니다. 이를 통해 비동기 작업의 흐름을 더 잘 제어 할 수 있습니다.
혼합 문제 : Thunks는 해당 운영과 관련된 비동기 운영 및 비즈니스 논리를 처리해야합니다. 관련없는 논리 또는 UI 업데이트를 직접 혼합하지 마십시오. Thunks는 비동기 흐름 관리 및 파견 동작에 중점을 두십시오.
펑크를 제대로 테스트하지 않음 : 싱크는 올바르게 접근하지 않으면 테스트하기가 까다로울 수 있습니다. 모의 함수 및 redux-mock-store 와 같은 라이브러리를 사용하여 에지 케이스 및 오류 시나리오를 포함하여 Thunks를 철저히 테스트하도록하십시오.