React Redux TypeError - 不是函数答案

【问题标题】：React Redux TypeError - is not a functionReact Redux TypeError - 不是函数
【发布时间】：2020-08-18 20:00:59
【问题描述】：

我正在尝试同时使用React 和Redux 来管理我的应用程序状态。我试图从我的操作中调用一个方法 (SprintActions)，但我不断收到错误

TypeError: props.getAllSprints is not a function

你能告诉我我在这里做错了什么吗？

我的主要组件是Sprint 组件，它导入SprintActions

这是我的Sprint 组件。

import React, { useEffect } from "react";
import { getSprints } from "./sprintActions";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";

export const Sprint = (props) => {

    useEffect(() => {
        props.getAllSprints();
    }, []);


    return (
        <div style={{ zIndex: 1 }}>
            {sprints &&
                sprints.map((s) => (
                <p>{s.id}</p>
                ))}

        </div>
    );
};
Sprint.propTypes = {
    getAllSprints: PropTypes.func,
};

const mapStateToProps = (state) => ({
    sprints: state.sprints,
});

const mapDispatchToProps = (dispatch) => ({
    getAllSprints: bindActionCreators(getSprints, dispatch),
});

export default connect(mapStateToProps, mapDispatchToProps)(Sprint);

这是我的SprintActions

import * as types from "../constants/ActionTypes";
import Axios from "axios";

export const getSprints = () => {
    console.log("get sprints");
    return (dispatch) => {
        Axios.get("http://127.0.0.1:5000/sprints").then((response) => {
            const sprintData = response.data;
            dispatch(getAllSprints(sprintData));
        });
    };
};

export const getAllSprints = (data) => ({
    type: types.GET_SPRINTS,
    data: data,
});

感谢您的时间和耐心。

【问题讨论】：

您已经在SprintActions 中定义了getAllSprints，并且您也在bindActionCreators 中声明了相同的内容。那是对的吗？我认为一些命名不匹配正在发生。
这是正确的吗？ import { getSprints } from "./sprintActions";不应该是import { getSprints } from "./SprintActions";

标签： reactjs redux redux-thunk

【解决方案1】：

bindActionCreators 用于将调度功能传递给您的商店不知道的组件，因为无论如何您在 connect 内使用 mapDispatchToProps 只是不需要它（无论如何您实现它的方式有点错误，欢迎关注https://redux.js.org/api/bindactioncreators 获取文档）。

让你的 mapDispatch 尽可能简单：

  const mapDispatchToProps = (dispatch) => ({
     getAllSprints: () => dispatch(getSprints()),
  });

# 编辑

您可以在 useEffect 中添加检查器，确认 getAllSprint 是函数（并且在设置 Redux 上下文后执行此行），并添加一个 [ props[getAllSprint] ] 依赖项以再次运行效果以防万一

 useEffect(() =>
        typeof props[getAllSprint] == 'function' && props.getAllSprint()
       , [ props[getAllSprint] ])

【讨论】：

很抱歉，我仍然收到相同的回复。请原谅我回复晚了。
请原谅我回复晚了，如果你仍然遇到这个问题，我编辑我的答案

【解决方案2】：

如果你有多个动作并且你想绑定它们，你可以这样做

import * as sprintActions from "./sprintActions";

export const Sprint = (props) => {
    useEffect(() => {
        props.sprintActions.getSprints();
    }, []);
    ...
};

const mapDispatchToProps = (dispatch) => ({
    sprintActions: bindActionCreators(sprintActions, dispatch),
});

否则，您将需要按照其他答案中的建议手动调用调度：

export const Sprint = (props) => {
    useEffect(() => {
        props.getAllSprints();
    }, []);
    ...
};

 const mapDispatchToProps = (dispatch) => ({
     getAllSprints: () => dispatch(getSprints()),
 });

【讨论】：

对不起，我选择了第二个选项，但我得到了相同的结果。抱歉回复晚了。

【解决方案3】：

您在这里尝试实现的目标应该通过使用redux-thunk（发送 api 请求）或redux-sagas（更复杂一点的 imo）来完成。您可以阅读this guide，这非常有帮助！

您的问题是您的getSprints 操作未返回具有属性（类型，...有效负载）为described here 的对象。如果您改用 getAllSprints 操作，您会发现它会起作用。

同时检查the docs of redux for bindActionCreators

希望对你有帮助

【讨论】：