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.
mapStateToProps
and mapDispatchToProps
both take ownProps
as the second argument.
[mapStateToProps(state, [ownProps]): stateProps] (Function):
[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function):
For reference