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

您正试图在class Routes extends Component { render() { return ( <Switch> <Route exact path="/" render={() => <Redirect to="/profile" />} /> <Route exact path="/profile" render={props => <Profile {...this.props} {...props} />} /> <Route exact path="/repos" render={props => <Repos {...this.props} {...props} />} /> <Route exact path="/org" render={props => <Org {...this.props} {...props} />} /> </Switch> ); } }内调用fetchRewardByPromoCode函数，但未在mapDispatchToProps范围内或父范围内声明此函数（fetchRewardByPromoCode）。也许您忘记了导入？

答案更新：

请确保在使用组件时使用默认导出（未命名导出），因为命名导出是未连接到redux存储的演示组件。您必须使用连接到redux的容器组件，因此请确保按以下方式导入它：

mapDispatchToProps

不是

import AdminRewardPage from '/somePath'

React-Redux，在分派函数时，“未捕获的TypeError不是函数”

1 个答案: