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

Program / 글쓴이

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

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

답변

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또한 한 액션 크리에이터 내에서 여러 번 파견 할 수 있습니다. 하나를 선택하든, 다른 하나를 선택하든, 둘 다 전적으로 귀하의 필요 / 스타일에 달려 있습니다.

답변

앱에서 둘 다 함께 원하거나 필요로 할 것입니다. 일상적인 약속을 생성하는 비동기 작업에 대한 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를 좋아한다고 생각 합니다.” )
  • 여러 작업을 전달해야한다고 생각할 수 있지만 실제로는 그렇지 않으며 간단한 작업을 단순하게 유지할 수있는 중요한 경우가 있습니다. 여기서 여러 감속기가 비동기 호출에 반응하기를 원합니다. 그러나 여러 감속기가 단일 작업 유형을 모니터링 할 수없는 이유는 전혀 없습니다. 당신은 단순히 당신이 그 규칙을 사용하고 있다는 것을 팀이 알고 있는지 확인하고 싶을 것입니다. 그래서 그들은 (관련된 이름을 가진) 하나의 감속기 만이 주어진 행동을 처리 할 수 ​​있다고 가정하지 않습니다.

답변

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

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

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

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

답변