2016-06-12 2 views
40

나는 React Native Navigator 구성 요소 내에서 생성되는 react-redux 컨테이너 구성 요소가 있습니다. 네비게이터를이 컨테이너 구성 요소의 소품으로 전달하여 버튼을 프리젠 테이션 구성 요소 내부에서 누르면 네비게이터 스택에 객체를 밀어 넣을 수 있기를 원합니다.반응을 반복하는 컨테이너 구성 요소에 전달하는 물건

나는 react-redux 컨테이너 구성 요소가 제공하는 모든 상용구 코드를 작성해야 할 필요없이이 작업을 수행하고 싶습니다. 또한 여기에 반응식 제공 업체가 제공 할 모든 최적화를 놓치지 마십시오.

예 컨테이너 구성 요소 코드 :

const mapStateToProps = (state) => { 
    return { 
     prop1: state.prop1, 
     prop2: state.prop2 
    } 
} 

const mapDispatchToProps = (dispatch) => { 
    return { 
     onSearchPressed: (e) => { 
      dispatch(submitSearch(navigator)) // This is where I want to use the injected navigator 
     } 
    } 
} 

const SearchViewContainer = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(SearchView) 

export default SearchViewContainer 

그리고 내 네비게이터 renderScene 함수 내에서이 같은 구성 요소를 호출 할 수 있도록하려는 것 : 컨테이너 코드에서

<SearchViewContainer navigator={navigator}/> 

을 위 mapDispatchToProps 함수 내에서이 전달 된 지주를 액세스 할 수 있어야합니다.

나는 redux 상태 객체에 네비게이터를 저장하는 것을 좋아하지 않으며 프락시 구성 요소에이 프롭을 전달하고 싶지 않습니다.

이 컨테이너 구성 요소에 소품을 전달할 수있는 방법이 있습니까? 또는, 제가 간과하고있는 대안 접근법이 있습니까?

감사합니다.

답변

69

mapStateToPropsmapDispatchToProps 모두가 두 번째 인수로 ownProps을 당신이 mapStateToProps의 구성 요소에 전달 된 소품에 액세스 할 수 있습니다 mapStateToProps(state, ownProps)에 두 번째 인수에 전달할 수 있습니다. reference

8

당신은

+0

mapDispatchToProps에서 어떻게 액세스 할 수 있습니까? – Michael

+1

@Michael 같은 방식으로 두 번째 인수를 사용할 수 있습니다 –

0

를 들어

[mapStateToProps(state, [ownProps]): stateProps] (Function): 
[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function): 

당신이 장식을 사용하는 경우, 아래의 코드를 사용하면 REDUX 연결을 위해 장식을 사용하려는 경우 예를 제공합니다.

@connect(
    (state, ownProps) => { 
     return { 
      Foo: ownProps.Foo, 
     } 
    } 
) 
export default class Bar extends React.Component { 

지금 체크하면 this.props.Foo 당신이 Bar 구성 요소가 사용 된 곳에서 추가 된 소품을 볼 수 있습니다. 이 경우 this.props.Foo에서

<Bar Foo={'Baz'} /> 

이 어떤 일을 명확히 문자열 '바즈'

희망이 될 것입니다.

관련 문제