React Router를 사용할 때 어떻게 Redux 컨테이너에 작업을 디스패치합니까?

Question

저는 현재 React, React Router 및 Redux를 사용하여 SPA를 구현하려고합니다.

이 시나리오에서는 동일한 상위 프레젠테이션 및 컨테이너 구성 요소를 공유하지만 URL을 기반으로 다른 "하위"프레젠테이션 구성 요소를 렌더링하는 두 개의 계층 적 경로가 있습니다. 예를 들어

:

/widgets/:slug -> 부모 + 위젯 세부 페이지

/widgets/:slug/things/:thing - 내가 어떤과 함께 부모를 렌더링 컨테이너 구성 요소를 만든

> 부모 + 것은 세부 정보 페이지 어린이. 제가하는 데 문제는 내가 mapStateToProps는 아래의 표상 구성 요소 (예 : widget 및 thing)를 적용 소품을 보내 전달합니다 있도록, 내가 컨테이너 구성 요소에서 작업 (예 : fetchWidgets(slug)를 파견 할 필요가 있다고 생각한다는 것입니다.

무엇 나는이 작업을 파견 실제로 할 수 있도록 dispatch 방법 참조와 같은 장소에서 props.params.slug 또는 props.params.thing 프로퍼티 참조 모두를 얻기 위해 어떻게 알아낼 수 없습니다.

이

Answer 1

당신은 통과 REDUX에서 제공하는 연결 기능을 사용한다 컨테이너에 소품으로 & 파견하십시오.

const mapStateToProps = (state) => { 
    return { 

    } 
}; 

const mapDispatchToProps = (dispatch) => { 
    return { 
     action:() => dispatch(actionGenerator()) 
    } 
}; 

export default Container = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(Component); 

Answer 2

작업 작성자 호출을 한 곳에서 유지하려면 소품을 통해 하위 구성 요소로 보낼 수 있습니다.

---

const Child = ({ 
    barOne 
    barTwo 
    foo 
}) => 
<div> 
    <input onChange={ foo() } /> 
    {barOne} 
    {barTwo} 
</div> 

<Parent 
    { ...bar } 
    foo={ x => actions.handlefoo(x) } 
/> 

는 분명히 이것은 의사 코드이지만 그것이 당신의 자식 구성 요소, 기능을 포함하여 모든 유형의 변수/객체를 전달하는 방법을 간단하게 설명한다.