React-Redux, when dispatching a function, "uncaught TypeError is not a function"

Question

I'm having an issue where when I want to dispatch an action, fetchRewardByPromoCodeAction it's saying that the action I want to dispatch is not a function.

In the the form, I use the the event handleer onSubmit then use handleSubmit. I noticed that my props becomes undefined so, which leads me to thinking that the connect function isn't working as expected. Any assistance would be helpful. Here's the code.

import React, { Component } from 'react';
import { connect
 } from 'react-redux';
import PromoCodeInput from 'components/promoCodeForm/PromoCodeInput';
import { fetchRewardByPromoCode, resetValidations } from 'rewards/ducks';
import Button from 'button/Button';

export class AdminRewardPage extends Component<Props> {
    constructor(props) {
        super(props);
        this.state = {
            promoCodeText: '',
        };
    }

    onPromoCodeChange = (event) => {
        this.setState({
            promoCodeText: event.target.value,
        });
        const { resetValidationsAction } = this.props;
        resetValidationsAction();
    };

    handleSubmit = (event) => {
        event.preventDefault()
        const { fetchRewardByPromoCodeAction } = this.props;
        const { promoCodeText } = this.state;
        fetchRewardByPromoCodeAction(promoCodeText);
    }

    render() {
        const { promoCodeText } = this.state

        return (
            <div>
                <h1>AdminRewardPage</h1>
                <form onSubmit={this.handleSubmit}>
                    <PromoCodeInput inputValue={promoCodeText} onChangeHandler={this.onPromoCodeChange} />
                    <Button type="submit" label="Find By PromoCode" fullWidth />
                </form>
            </div>
        )
    }
}


const mapDispatchToProps = (dispatch) => ({
    resetValidationsAction: () => dispatch(resetValidations()),
    fetchRewardByPromoCodeAction: (promoCodeText) => dispatch(fetchRewardByPromoCode(promoCodeText)),
});

export default connect(null, mapDispatchToProps)(AdminRewardPage);

in rewards/ducks.js

export const fetchRewardByPromoCode = (promoCode: string): FSAModel => ({
      type: FETCH_REWARD_BY_PROMOCODE,
      payload: promoCode,
})

---EDIT--WITH--ANSWER---

@Bartek Fryzowicz below helped lead me to right direction. I forgot to look in my index.js file where my routes are

Previously I had

import { AdminRewardPage } from 'scenes/AdminRewardPage'

instead of 

import AdminRewardPage from 'scenes/AdminRewardPage'



<Router history={ history }>
  <Switch>
    <Route exact path={ `/rewards` } component={AdminRewardPage} />
  </Switch>
</Router>

I didn't bother to look how I was importing it.

LESSON

Look at where and HOW your files are being imported and exported.

Answer 1

You're trying to call fetchRewardByPromoCode function inside mapDispatchToProps but such function (fetchRewardByPromoCode) is not declared inside mapDispatchToProps scope nor in parent scope. Maybe you have forgotten to import it?

Answer update:

Please make sure that when you use the component you use default export (not named export) since named export is the presentational component not connected to redux store. You have to use container component connected to redux so make sure you import it like this:

import AdminRewardPage from '/somePath'

not

import { AdminRewardPage } from '/somePath'