javascript - React-Redux，调度函数时， "uncaught TypeError is not a function"

Question

我遇到一个问题，当我想分派(dispatch)一个 Action 时，fetchRewardByPromoCodeAction 说我想分派(dispatch)的 Action 不是一个函数。

在表单中，我使用事件处理程序 onSubmit，然后使用 handleSubmit。我注意到我的 props 变得未定义，这让我认为 connect 函数没有按预期工作。任何帮助都会有所帮助。这是代码。

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);

在 rewards/ducks.js 中

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

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

下面的@Bartek Fryzowicz 帮助我找到了正确的方向。我忘了查看路由所在的 index.js 文件

以前我有

import { AdminRewardPage } from 'scenes/AdminRewardPage'

instead of 

import AdminRewardPage from 'scenes/AdminRewardPage'



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

我懒得看我是如何导入它的。

类(class)

查看您的文件导入和导出的位置和方式。

Answer 1

您正在尝试调用 fetchRewardByPromoCode内部功能mapDispatchToProps但是这样的函数(fetchRewardByPromoCode)没有在mapDispatchToProps里面声明范围也不在父范围内。也许您忘记导入它了？

答案更新:

请确保在使用组件时使用默认导出(未命名导出)，因为命名导出是未连接到 redux 存储的展示组件。你必须使用连接到 redux 的容器组件，所以确保你像这样导入它:

import AdminRewardPage from '/somePath'

不是

import { AdminRewardPage } from '/somePath'