Michael Michael - 1 month ago 14
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(
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

mapStateToProps and mapDispatchToProps both take ownProps as the second argument.

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

For reference