store.dispatch is not a function

Question

I'm using a router component for routing my app. I have a file like this:

import CustomerDetailsContainer from '../views/CustomerDetails/customerDetailsContainer';
import CustomerInfoContainer from '../views/CustomerInfo/customerInfoContainer';
import { setUIState } from '../../actions/index';

const inCustomerInfo = (store) => {
  store.dispatch(setUIState(CURRENT_SCREEN, 'customerInfo'));
};
const inCustomerDetails = (store) => {
  store.dispatch(setUIState(CURRENT_SCREEN, 'customerDetails'));
};

export default (store) => {
  return [
    authenticatedRouteConfig(
      store,
      `/${CUSTOMER_INFO}`,
      CustomerInfoContainer,
      inCustomerInfo
    ),

    authenticatedRouteConfig(
      store,
      `/${CUSTOMER_DETAILS}/:cid`,
      CustomerDetailsContainer,
      inCustomerDetails
    ),
  ];
};

And error is showing that store.dispatch is not a function. What am i missing? Why this message is appearing? Isn't store a global variable?

Answer 1

You have to use dispatch from redux to dispatch action.

 import {connect} from "react-redux"   

 const mapDispatchToProps = (dispatch) => {
       return {
          inCustomerInfo : (setUIState) => {
              dispatch(setUIState(CURRENT_SCREEN, 'customerInfo')
           },
          inCustomerDetails : (setUIState) => {
              dispatch(setUIState(CURRENT_SCREEN, 'customerDetails')
        }
      }

export default connect(mapDispatchToProps)(Comp)