1. ホーム
  2. reactjs

[解決済み] react-reduxコンテナコンポーネントへのpropsの受け渡し

2023-05-11 08:44:41

質問

React-Reduxのコンテナコンポーネントがあり、React Nativeのナビゲータコンポーネント内に作成されています。私はナビゲータをこのコンテナコンポーネントにpropとして渡すことができるようにしたいので、その提示コンポーネント内でボタンが押された後、それはナビゲータスタックにオブジェクトをプッシュすることができます。

私は、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ステートオブジェクトに格納するのは気が進みませんし、propをプレゼンテーショナルコンポーネントに渡したくありません。

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

ありがとうございます。

どのように解決するのですか?

mapStateToProps そして mapDispatchToProps はどちらも ownProps を第二引数として取ります。

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

について 参照