navigation.dispatch is undefined in reactnavigation

Question

Im creating a react-native app with reactnavigation and redux.

On loading the app 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 attempt to navigate pages via this.props.navigation.navigate('Station'); as navigation.dispatch is not a function

The app has a NavContainer which I'm guessing is missing something as dispatch is undefined in the render 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 a mapDispatchToProps, connect doesn't pass dispatch to the wrapped component.. that's why this.props.dispatch is undefined. To solve this, you could do:

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