Redux Thunk와 Redux Saga의 차이점은 무엇입니까?

Redux Thunk와 Redux Saga의 차이점은 무엇입니까?

Redux Thunk와 Redux Saga는 모두 Redux의 미들웨어입니다.2개의 차이점과 Redex Thunk 또는 Redux Saga의 사용 시기를 결정하는 방법은 무엇입니까?

Redux Thunk와 Redux Saga는 모두 부작용에 대처하고 있습니다.간단히 말하면 가장 일반적인 시나리오(비동기 함수, 특히 AJAX 콜)에 적용됩니다.Thunk는 Promise가 그들과 거래할 수 있도록 허용하고, Saga는 제너레이터를 사용합니다.Thunk는 사용하기 쉽고 Promise는 많은 개발자들에게 친숙합니다. Saga/Generators는 더 강력하지만 배워야 합니다.Promise가 충분히 유효하다면 Thunk도 마찬가지입니다. 더 복잡한 사례를 정기적으로 처리할 때 Saga는 더 나은 도구를 제공합니다.

예를 들어 루트/뷰에서 AJAX 콜을 시작하고 사용자가 다른 콜로 이동하면 어떻게 됩니까?어쨌든 환원기가 상태를 바꾸게 할 수 있나요?Saga는 이 효과를 취소하는 것을 대수롭지 않게 여기며 Thunk는 이 효과를 적절하게 확장되지 않는 솔루션으로 처리하도록 요구합니다.

실질적으로 어느 한쪽을 선택하는 것은 프로젝트에 따라 다릅니다.

주의할 점은 두 미들웨어가 공존할 수 있기 때문에 Thunks부터 시작하여 필요할 때 Sagas를 소개할 수 있습니다(그 후 실무 경험을 바탕으로 리팩터링 방법/무엇을 선택할 수 있습니다).특히 '학습 프로젝트', 최우수선수(MVP) 등에 적합한 솔루션)일반적으로 Sagas는 더 강력하고 테스트하기 쉽지만, 새로운 개념을 많이 도입하고 있습니다.다른 테크놀로지(특히 Redux)도 배우고 있다면 이 개념은 다소 부담스러울 수 있습니다.

구체적으로는 단순하고 효과적인 Redux 철학(리듀서(순수함수)에 대처하는 한편, Thunk로 보다 제한적이지만 알기 쉬운 부작용에 대처할 수 있습니다(Promise.then().error()Saga에서는, 이러한 조작으로 보다 복잡한 작업을 실시할 수 있다는 (강력한) 개념에 직면할 필요가 있습니다.

(redux-) 관찰 가능한 것은 부작용에 대처하기 위한 훨씬 더 복잡한 (그리고 더 강력한) 패러다임을 가지고 있다는 것을 언급할 필요가 있습니다. 만약 여러분이 부작용에 익숙하지 않다면, 여러분이 이미 사가를 배우는 것보다 사용하기가 더 쉬울 수도 있습니다.

사실 둘 다 미들웨어예요Redux비동기 액션을 처리합니다.에 주목해 .

미들웨어 박스는 일반적으로 기존 소프트웨어의 개별 기능을 하나로 묶는 소프트웨어 서비스를 말합니다.Redx의 경우 미들웨어는 액션을 디스패치하고 액션을 리듀서에 넘기는 서드파티 확장 포인트를 제공합니다.리듀서가 새로운 상태를 만듭니다.

Redx Thunk는 액션 오브젝트 대신 함수를 반환하는 액션 크리에이터를 호출할 수 있는 미들웨어입니다.이 함수는 스토어의 디스패치 메서드를 수신하여 비동기 조작이 완료되면 함수 본문 내에서 정기적인 동기 액션을 디스패치하는 데 사용됩니다.352B 볼륨으로 심플하고 학습 및 사용이 용이함

Redux Saga는ES6라고 하는 기능을 사용하면, 동기해 보이는 비동기 코드를 작성할 수 있어 테스트하기 매우 쉽습니다.사가에서는 비동기 플로우를 쉽게 테스트할 수 있고 액션은 순수하게 유지됩니다.복잡하고, 배우고, 이해하기 어렵지만, 복잡한 비동기 액션을 쉽게 정리하여 읽기 쉽게 만들 수 있으며, 사가에는 비동기 액션을 처리할 수 있는 유용한 툴이 많이 있습니다.

힌트: 그 차이를 이해하지 못하거나redux-saga, 단, 판독 하고 싶은 flow, , callback hell, callback hell, callback hell, callback hell, callback hell, callback hell, callback hell.redux-thunk를 사용하여 제안의 예를 제시하겠습니다.

// simple usage of redux-thunk:
export const asyncApiCall = values => {
  return dispatch => {
    return axios.get(url)
      .then(response =>{
        dispatch(successHandle(response));
      })
      .catch(error => {
        dispatch(errorHandle(error));
      });
    };
  };



// async/await usage of redux-thunk:
export const asyncApiCall = values => {
  return async dispatch => {
    try {
      const response = await axios.get(url);
      dispatch(successHandle(response));
    }
    catch(error) {
      dispatch(errorHandle(error));
    }
  };
};

언급URL : https://stackoverflow.com/questions/50285972/what-is-the-difference-between-redux-thunk-and-redux-saga