web-dev-qa-db-ja.com

反応還元コンテナコンポーネントに小道具を渡す

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状態オブジェクトにナビゲーターを保存するのは面倒ではなく、小道具をプレゼンテーションコンポーネントに渡したくありません。

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

ありがとう。

reactjsreact-nativereduxreact-redux
68
Michael

mapStateToPropsとmapDispatchToPropsは、両方ともownPropsを2番目の引数として取ります。

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

参照 の場合

106
Abhinav Singi

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

11
Conor Hastings

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

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

別の落とし穴は、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} />
2
Damian Green

デコレータの使用（@）

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

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

1
Joe Lloyd