Michael Michael - 1 year ago 110
React JSX Question

Passing props to react-redux container component

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(

export default SearchViewContainer

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

<SearchViewContainer navigator={navigator}/>

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

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?


Answer Source

mapStateToProps and mapDispatchToProps both take ownProps as the second argument.

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

For reference

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download