Passing props to react-redux container component

Question

I have a react-redux container component that is created within a React Native Navigator component. I want to be able to pass the navigator as a prop to this container component so that after a button is pressed inside its presentational component, it can push an object onto the navigator stack.

I want to do this without needing to hand write all the boilerplate code that the react-redux container component gives me (and also not miss out on all the optimisations that react-redux would give me here too).

Example container component code:

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 

And I'd want to be able to call the component like this from within my navigator renderScene function:

<SearchViewContainer navigator={navigator}/> 

In the container code above, I'd need to be able to access this passed prop from within the mapDispatchToProps function.

I don't fancy storing the navigator on the redux state object and don't want to pass the prop down to the presentational component.

Is there a way I can pass in a prop to this container component? Alternatively, are there any alternative approaches that I'm overlooking?

Thanks.

Answer 1

mapStateToProps and mapDispatchToProps both take ownProps as the second argument.

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

For reference

Answer 2

You can pass in a second argument to mapStateToProps(state, ownProps) which will give you access to the props passed into the component in mapStateToProps