React NativeNavigatorコンポーネント内に作成された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関数内からこの渡された小道具にアクセスできる必要があります。

ナビゲーターをredux状態オブジェクトに保存したくないし、小道具をプレゼンテーションコンポーネントに渡したくない。

このコンテナコンポーネントに小道具を渡す方法はありますか？あるいは、私が見落としている代替アプローチはありますか？

ありがとう。

mapStateToPropsそしてmapDispatchToProps両方ともownProps2番目の引数として取ります。

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

以下のための参照

mapStateToProps(state, ownProps)mapStateToPropsのコンポーネントに渡された小道具へのアクセスを提供する2番目の引数を渡すことができます

typescriptでこれを行う場合、いくつかの落とし穴があるので、ここに例を示します。

1つの落とし穴は、dispatchToPropsのみを使用している（状態プロパティをマッピングしていない）場合、状態パラメータを省略しないことが重要です（アンダースコアプレフィックスを付けて名前を付けることができます）。

もう1つの落とし穴は、ownPropsパラメータは、渡された小道具のみを含むインターフェイスを使用して入力する必要があることでした。これは、小道具インターフェイスを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} />

デコレータの使用（@）

デコレータを使用している場合、以下のコードは、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」になります

これがいくつかのことを明らかにすることを願っています。