redux-thunk와 calling dispatch()를 직접 사용하는 것의 차이점

Question

나는 redux 상태 관리를 이해하고 있으며 상용구 코드와 미들웨어의 어렴풋한 정글을 협상하려고 노력 중이다. 믿음을 '좋은 약'이라고 생각합니다. 그래서 나는이 초보적인 질문에 대해 나와 함께 견뎌내기를 바랍니다.

나는 redux-thunk을 사용하면 작업 작성자가 비동기 적으로 진행하고 후속 작업에서 일반 작업을 처리 할 수 ​​있음을 알고 있습니다. 예를 들어, 내 actions.js에 썽크 액션 제작자를 정의 할 수 있습니다 :

export function startTracking() { 
    return (dispatch => { 
    someAsyncFunction().then(result => dispatch({ 
     type: types.SET_TRACKING, 
     location: result 
    })) 
    }) 
} 

그래서 같은 반작용 구성 요소 내에서 호출 :

이

onPress={() => this.props.dispatch(actions.startTracking())} 

내 질문이이며, 어떤 장점은 위의 작업을 수행 코드는 단순히 비동기 콜백 내부에서 액션을 전달하는 것 이상을 제공합니까? 내 구성 요소 내에서 호출 할

import { store } from '../setupRedux' 
... 

export function startTracking() { 
someAsyncFunction().then(result => { 
    store.dispatch({ 
    type: types.SET_TRACKING, 
    location: result 
    }) 
}) 
} 

onPress={() => actions.startTracking()} 

또는

onPress={actions.startTracking} 

내가 제 2의 예에서 일을 해요로 가져 오기를 통해 직접 store 접근에 문제가 있나요 ?

Answer 1

그렇게하는 데는 아무런 문제가 없습니다. redux-thunk page :

필요성을 확신 할 수없는 경우 아마 그렇지 않을 수 있습니다.

REDUX의 작성자는 그것을 here를 사용하는 장점을 설명합니다

이 간단 보이지만, 우리는이 방법을 사용하지 않는 것이 좋습니다. 우리가 싫어하는 주된 이유는 가게가 싱글 톤이되기 때문입니다. 따라서 서버 렌더링을 구현하는 것이 매우 어렵습니다. 서버에서는 각 요청에 고유 한 저장소가 있어야하므로 다른 사용자가 서로 다른 미리로드 된 데이터를 가져옵니다.

기본적으로 redux-thunk를 사용하면 각 작업 작성자 파일에 저장소 가져 오기가 저장되므로 여러 저장소를 가질 수 있습니다. 이 방법은 코드를 적게 작성하고 스파게티 코드를 피할 수있는 기회를 제공합니다. 많은 redux 개발자는 저장소를 가져오고 수동으로 디스패치하기를 싫어합니다. 코드가 심하게 분리 된 경우 순환 종속성을 만들 수 있기 때문입니다. (reducers 파일의 작업 작성자 파일에서 작업 이름을 가져오고 in reducer 파일에서 저장소를 가져옵니다. 액션 크리에이터 파일). 또한 이와 같은 조치를 직접 수행하면 미들웨어 워크 플로가 중단 될 수 있습니다. 즉, 미들웨어로 처리하지 못할 수 있습니다.

솔직히 아직 이점이 없다면 사용하지 마십시오. 언젠가 비동기 작업에 문제가 있으면 redux-thunk가 대답 일 수 있습니다.