[reactjs] react-redux 컨테이너 구성 요소에 소품 전달

Program / 글쓴이

React Native Navigator 구성 요소 내에서 생성 된 react-redux 컨테이너 구성 요소가 있습니다. 내비게이터를이 컨테이너 구성 요소에 소품으로 전달하여 프레젠테이션 구성 요소 내부에서 버튼을 누른 후 개체를 탐색기 스택으로 푸시 할 수 있기를 원합니다.

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함수 내에서 전달 된이 prop에 액세스 할 수 있어야 합니다.

redux 상태 객체에 네비게이터를 저장하는 것을 좋아하지 않으며 prop을 프리젠 테이션 구성 요소로 전달하고 싶지 않습니다.

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

감사.

답변

mapStateToProps그리고 mapDispatchToProps모두 가지고 ownProps두 번째 인수로.

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

대한 참조

답변

mapStateToProps(state, ownProps)mapStateToProps의 구성 요소에 전달 된 소품에 대한 액세스를 제공 하는 두 번째 인수를 전달할 수 있습니다.

답변

typescript로이 작업을 수행 할 때 몇 가지 문제가 있으므로 여기에 예제가 있습니다.

한 가지 문제점은 dispatchToProps 만 사용할 때 (상태 props를 매핑하지 않음) 상태 매개 변수를 생략하지 않는 것이 중요하다는 것입니다 (밑줄 접두사로 이름을 지정할 수 있음).

또 다른 문제점은 전달 된 props 만 포함하는 인터페이스를 사용하여 ownProps 매개 변수를 입력해야한다는 것입니다. 이는 props 인터페이스를 두 개의 인터페이스로 분할하여 얻을 수 있습니다.

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} />

답변

데코레이터 (@) 사용

데코레이터를 사용하는 경우 아래 코드는 redux 연결에 데코레이터를 사용하려는 경우에 대한 예를 제공합니다.

@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’문자열 이 됩니다.

이것이 몇 가지를 명확히하기를 바랍니다.

답변