title: Why my "mapDispatchToProps" does not see my action function?
body: <p>Please tell me why, when I call this.props.getOnEvents(), an error occurs that “getOnEvents() is not a function”, what’s wrong here and how to fix it?
  I’m looking at the console.log and there is this function in the props, but when I try to call, an error flies out that it’s not a function</p>
  
  <p>EventCalendar.js
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import { withStyles } from '@material-ui/core/styles';
  import EventCalendarTable from './EventCalendarTable';
  import EventCalendarView from './EventCalendarView';
  
  const styles = theme =&gt; ({
    root: {
      width: '80%',
      margin: '20px auto 0'
    },
  });
  
  class EventCalendar extends Component {
    constructor(props) {
      super(props);
      this.state = {
        viewEvents: 'table'
      };
    }
  
    componentDidMount() {
      this.props.onGetEvents();
    }
  
    changeEventsView = (value) =&gt; {
      this.setState({ viewEvents: value });
    }
  
    render() {
      console.log(this.props);
      const { classes } = this.props;
      return (
          &lt;div className={classes.root}&gt;
            &lt;EventCalendarView changeEventsView={this.changeEventsView}/&gt;
            {
              this.state.viewEvents === 'table'
                ? &lt;EventCalendarTable /&gt;
                : &lt;div&gt;test&lt;/div&gt;
            }
  
          &lt;/div&gt;
      );
    }
  }
  
  export default withStyles(styles)(EventCalendar);</code></pre>
  </div>
  </div>
  </p>
  
  <p>EventPage/component.jsx
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import EventCalendar from '../../components/EventCalendar';
  import './index.scss';
  
  function Events(props) {
    return (
      &lt;React.Fragment&gt;
        &lt;EventCalendar props={props}/&gt;
      &lt;/React.Fragment&gt;
    );
  }
  
  export default Events;</code></pre>
  </div>
  </div>
  </p>
  
  <p>EventPage/container.js
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { connect } from 'react-redux';
  import EventsPage from './component';
  import { getEvents } from '../../../store/modules/Events/operations';
  
  const mapStateToProps = ({ Events }) =&gt; ({
    Events
  });
  
  const mapDispatchToProps = dispatch =&gt; ({
    onGetEvents: () =&gt; {
      console.log(123);
  
      dispatch(getEvents());
    }
  });
  
  export default connect(
    mapStateToProps,
    mapDispatchToProps
  )(EventsPage);</code></pre>
  </div>
  </div>
  </p>
  
  <p>Events/actions.js
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import * as types from './types';
  
  export const eventsFetch = value =&gt; ({
    type: types.FETCHING_EVENTS,
    payload: value
  });
  
  export const setEvents = ({ objById, arrayIds }) =&gt; ({
    type: types.SET_EVENTS,
    payload: {
      eventById: objById,
      eventsOrder: arrayIds
    }
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>Events/types.js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export const FETCHING_EVENTS = 'Events/FETCHING_EVENTS';
  export const SET_EVENTS = 'Events/SET_EVENTS';</code></pre>
  </div>
  </div>
  </p>
  
  <p>Events/operation.js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import FetchClient from 'app/utils/FetchClient';
  import IdsAndByIds from 'app/utils/IdsAndByIds';
  import { eventsFetch, setEvents } from './actions';
  
  export const getEvents = () =&gt; async (dispatch) =&gt; {
    try {
      const { data } = await FetchClient.get('/events');
      dispatch(setEvents(IdsAndByIds(data)));
      dispatch(eventsFetch(false));
    } catch (error) {
      console.log(error);
    }
  };</code></pre>
  </div>
  </div>
  </p>
  
  <p>Events/reducer.js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { createReducer } from 'store/utils';
  import * as types from './types';
  
  const usersInitState = {
    fetching: true,
    events: {
      eventById: null,
      usersOrder: null
    },
    error: null
  };
  
  const eventsReducer = createReducer(usersInitState)({
    [types.FETCHING_EVENTS]: (state, { payload }) =&gt; ({
      ...state,
      fetching: payload
    }),
    [types.SET_EVENTS]: (state, { payload }) =&gt; ({
      ...state,
      events: {
        ...payload
      }
    })
  });
  
  export default eventsReducer;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Events/index.js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { combineReducers } from 'redux';
  import * as eventsListOperations from './operations';
  import reducer from './reducers';
  
  const EventsReducer = combineReducers({
    eventsList: reducer
  });
  
  export default EventsReducer;
  export { eventsListOperations };</code></pre>
  </div>
  </div>
  </p>