your programing

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

lovepro 2020. 10. 4. 12:53
반응형

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


내가 틀렸다면 내가 알고 수정하는 한, 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 returns a promise as the payload when an action is dispatched, and then the ReduxPromise middleware works to resolve that promise and pass the result to the reducer.

ReduxThunk, on the other hand, forces the action creator to hold off on actually dispatching the action object to the reducers until dispatch is called.

Here's a link to the tutorial where I found this info: https://blog.tighten.co/react-101-part-4-firebase.

참고URL : https://stackoverflow.com/questions/36577510/what-is-the-difference-between-redux-thunk-and-redux-promise

반응형