반응 환원 용기 구성요소로 전달 소품

반응 환원 용기 구성요소로 전달 소품

React Native Navigator 구성 요소 내에 생성된 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기능.

Navigator를 redox 상태 객체에 저장하는 것을 좋아하지 않으며 소품을 프레젠테이션 컴포넌트에 전달하고 싶지 않습니다.

이 컨테이너 컴포넌트에 소품을 전달할 수 있는 방법이 있습니까?또는 제가 간과하고 있는 대체 접근법이 있습니까?

감사해요.

mapStateToProps그리고.mapDispatchToProps둘 다 가져가다ownProps두 번째 인수로요.

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

참고용

두 번째 인수는 에 전달할 수 있습니다.mapStateToProps(state, ownProps)mapStateToProps 컴포넌트에 전달된 소품에 액세스할 수 있습니다.

타이프 스크립트로 이 작업을 수행할 때 몇 가지 문제가 있습니다. 예를 들어 보겠습니다.

첫 번째는 dispatch ToProps만을 사용하는 경우(스테이트 소품 매핑은 하지 않음), 상태 파라미터를 생략하지 않는 것이 중요합니다(밑줄 프리픽스로 이름 붙일 수 있습니다).

ownProps param은 전달된 소품만 포함하는 인터페이스를 사용하여 입력해야 합니다.이것은 소품 인터페이스를 2개의 인터페이스로 분할하는 것으로 실현됩니다.

interface MyComponentOwnProps {
  value: number;
}

interface MyComponentConnectedProps {
  someAction: (x: number) => void;
}

export class MyComponent extends React.Component<
  MyComponentOwnProps & MyComponentConnectedProps
> {
....//  component logic
}

const mapStateToProps = (
  _state: AppState,
  ownProps: MyComponentOwnProps,
) => ({
  value: ownProps.value,
});

const mapDispatchToProps = {
  someAction,
};

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

컴포넌트는 단일 파라미터를 전달함으로써 선언할 수 있습니다.

<MyComponent value={event} />

데코레이터 사용(@)

데코레이터를 사용하는 경우, 아래 코드는 레덕스 연결에 데코레이터를 사용하는 경우의 예를 보여 줍니다.

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

지금 확인하면this.props.Foo여기서 추가된 소품을 보실 수 있습니다.Bar컴포넌트가 사용되었습니다.

<Bar Foo={'Baz'} />

이 경우this.props.Foo'Baz'라는 문자열이 됩니다.

이걸로 뭔가 명확해졌으면 좋겠어요.

언급URL : https://stackoverflow.com/questions/37778153/passing-props-to-react-redux-container-component