redux-thunk와 redux-promise의 차이점은 무엇입니까?


93

내가 틀렸다면 내가 알고 수정하는 한, redux-thunk 는 작업 자체에서 비동기 함수를 전달하고 값을 디버그하는 데 도움이되는 미들웨어이며, redux-promise를 사용할 때 내 자신을 구현하지 않고는 비동기 함수를 만들 수 없었습니다. 메커니즘은 일반 객체 만 디스패치하는 예외를 throw합니다.

이 두 패키지의 주요 차이점은 무엇입니까? 단일 페이지 반응 앱에서 두 패키지를 모두 사용하는 이점이 있습니까? 아니면 redux-thunk를 고수하는 것으로 충분할까요?

답변:


120

redux-thunk 액션 생성자가 함수를 반환 할 수 있습니다.

function myAction(payload){
    return function(dispatch){
        // use dispatch as you please
    }
}

redux-promise 약속을 반환 할 수 있습니다.

function myAction(payload){
    return new Promise(function(resolve, reject){
        resolve(someData); // redux-promise will dispatch someData
    });
}

두 라이브러리는 작업을 비동기 또는 조건부로 전달해야하는 경우 유용합니다. redux-thunk또한 한 액션 크리에이터 내에서 여러 번 파견 할 수 있습니다. 하나를 선택하든, 다른 하나를 선택하든, 둘 다 전적으로 귀하의 필요 / 스타일에 달려 있습니다.


1
좋은 대답입니다. 썽 크는 가벼운 약속으로 생각할 수 있다고 덧붙일 수 있습니다. 비동기 작업을 관리 할 때 시간을 정상화하는 데 도움이됩니다.
Matt Catellier

4
promise를 사용하는 경우 작업 생성자와 함께 async / await를 사용할 수 있습니다
robbie

81

앱에서 둘 다 함께 원하거나 필요로 할 것입니다. 일상적인 약속을 생성하는 비동기 작업에 대한 redux-promise로 시작한 다음 복잡성이 증가함에 따라 Thunk (또는 Sagas 등)를 추가하도록 확장합니다 .

  • 삶이 단순하고 하나의 약속을 반환하는 크리에이터와 기본적인 비동기 작업을 수행하면 삶 redux-promise을 개선하고이를 빠르고 쉽게 단순화 할 수 있습니다. (간단히 말해, 약속이 해결 될 때 약속을 '포장 해제'한 다음 결과를 작성 / 발송하는 것에 대해 생각할 필요없이 redux-promise (-middleware)가 모든 지루한 작업을 처리합니다.)
  • 그러나 다음과 같은 경우 삶이 더 복잡해집니다.
    • 액션 제작자가 몇 가지 약속을 생성하고 싶은데,이를 별도의 리듀서에 별도의 액션으로 전달하고 싶습니까?
    • 아니면 결과를 어디에서 어떻게 전달할지 결정하기 전에 관리해야 할 복잡한 전처리 및 조건부 논리가 있습니까?

이 경우 의 이점은 redux-thunk액션 생성자 내부의 복잡성을 캡슐화 할 수 있다는 것 입니다.

하지만 Thunk가 promise를 생성하고 전달하는 경우 두 라이브러리를 함께 사용하는 것이 좋습니다 .

  • Thunk는 원래 작업을 구성하고 전달합니다.
  • redux-promise그런 다음 Thunk가 생성 한 개별 약속을 감속기에서 언 래핑하여 수반되는 상용구를 방지합니다. (당신은 할 수 대신에, 썽크 모든 것을 할 promise.then(unwrapAndDispatchResult).catch(unwrapAndDispatchError)... 그런데 왜 당신 것?)

사용 사례의 차이점을 요약하는 또 다른 간단한 방법 : Redux 작업주기의 시작과 끝 :

  • 썽 크는 Redux 흐름 의 시작 을위한 것입니다. 복잡한 작업을 만들거나 약간의 작업 생성 논리를 캡슐화해야하는 경우 구성 요소와 확실히 리듀서에서 제외됩니다.
  • redux-promise모든 것이 간단한 약속으로 요약되면 흐름 의 을 위한 것입니다.

참고 / 참고 :

  • 나는 redux-promise-middleware원본이면의 아이디어를보다 완전하고 이해하기 쉽게 구현 한 것 redux-promise입니다. 활발하게 개발 중이며 redux-promise-reducer.
  • 복잡한 작업을 구성 / 시퀀싱하는 데 사용할 수있는 추가 유사한 미들웨어가 있습니다. 매우 인기있는 미들웨어 중 하나는 redux-saga입니다. 이는와 매우 유사 redux-thunk하지만 생성기 함수의 구문을 기반으로합니다. 다시 말하지만, redux-promise.
  • 다음은 thunk 및 redux-promise-middleware를 포함한 다양한 비동기 구성 옵션을 직접 비교 하는 훌륭한 기사 입니다. (TL; DR : "Redux Promise Middleware는 다른 옵션에 비해 상용구를 상당히 극적으로 줄여줍니다." ... "나는 더 복잡한 애플리케이션 ("용도 "읽기)을 위해 Saga를 좋아 하고 다른 모든 것을 위해 Redux Promise Middleware를 좋아한다고 생각 합니다." )
  • 여러 작업을 전달해야한다고 생각할 수 있지만 실제로는 그렇지 않으며 간단한 작업을 단순하게 유지할 수있는 중요한 경우가 있습니다. 여기서 여러 감속기가 비동기 호출에 반응하기를 원합니다. 그러나 여러 감속기가 단일 작업 유형을 모니터링 할 수없는 이유는 전혀 없습니다. 당신은 단순히 당신이 그 규칙을 사용하고 있다는 것을 팀이 알고 있는지 확인하고 싶을 것입니다. 그래서 그들은 (관련된 이름을 가진) 하나의 감속기 만이 주어진 행동을 처리 할 수 ​​있다고 가정하지 않습니다.

5
훌륭한 설명! 엄청난 수의 도서관은 단지 마음이 끓는 것입니다. :)
AnBisw

22

전체 공개 : 나는 상대적으로 Redux 개발에 익숙하지 않으며이 질문에 나 자신이 어려움을 겪었습니다. 내가 찾은 가장 간결한 답변을 의역 할 것입니다.

ReduxPromise는 작업이 전달 될 때 페이로드로 promise를 반환하고 ReduxPromise 미들웨어는 해당 promise를 해결하고 결과를 감속기에 전달합니다.

반면에 ReduxThunk는 액션 생성자가 디스패치가 호출 될 때까지 실제로 액션 객체를 리듀서로 디스패치하는 것을 보류하도록합니다.

이 정보를 찾은 튜토리얼 링크는 https://blog.tighten.co/react-101-part-4-firebase 입니다.


5
... 일종의 . 그것들은 사용 된 실제 패턴의 ... 부작용입니다. ReduxPromise는 또한 프라 미스를 페이로드로 반환하지 않습니다. ReduxPromise는 처리 당신이 약속이 어디 디스패치하도록 조치를 페이로드.
XML
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.