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

Question

我遇到了一个问题，当我想要分派一个动作时，fetchRewardByPromoCodeAction 它说我想要分派的动作不是一个函数。

在表单中，我使用事件处理程序 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);

in rewards/ducks.js

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

---编辑--带--答案---

@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>

我懒得看我是怎么导入的。

课程

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

Answer 1

您正在尝试在 mapDispatchToProps 中调用 fetchRewardByPromoCode 函数，但此类函数 (fetchRewardByPromoCode) 未在 mapDispatchToProps 范围内或父范围内声明。也许你忘了导入它？

答案更新：

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

import AdminRewardPage from '/somePath'

没有

import { AdminRewardPage } from '/somePath'

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

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

javascript

reactjs

redux

redux-saga