Navigation.dispatch undefined in intensive care

Question

Im creating a reaction and reduction reaction application.

When I download the application, I get the following warning from NavContainer: Warning: Failed prop type: The prop 'navigation.dispatch' is marked as required in 'CardStack', but its value is 'undefined'

This leads to errors when I try to navigate pages through this.props.navigation.navigate('Station'); since navigation.dispatch is not a function

There is a NavContainer in the application, which I assume is missing, since sending undefined in the rendering function:

 import React, { Component } from 'react' import { addNavigationHelpers } from 'react-navigation' import AppNavigator from '../lib/navigationConfiguration' import { connect } from 'react-redux' import { bindActionCreators } from 'redux'; import { ActionCreators } from '../actions'; class NavContainer extends Component { render(){ const { dispatch, navigationState} = this.props return ( <AppNavigator navigation={ addNavigationHelpers({ dispatch: dispatch, state: navigationState }) } /> ) } } function mapStateToProps(state){ return { navigationState: state.nav } } function mapDispatchToProps(dispatch){ return bindActionCreators(ActionCreators, dispatch); } export default connect(mapStateToProps, mapDispatchToProps)(NavContainer) 

Answer 1

When you define mapDispatchToProps , connect does not pass dispatch to the wrapped component .. so this.props.dispatch is undefined. To solve this problem, you can:

 function mapDispatchToProps(dispatch){ return Object.assign({dispatch: dispatch}, bindActionCreators(ActionCreators, dispatch)); }