Question

我正在尝试同时使用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,
});

感谢您的时间和耐心。

Answer 1

您要在此处实现的目标应该通过使用redux-thunk（调度api请求）或redux-sagas（稍微复杂一些的imo）来完成。您可以阅读this guide，这非常有帮助！

您的问题是您的getSprints操作不会返回具有属性（类型，... payload）为described here的对象。如果您使用getAllSprints动作，则会看到它会起作用。

还要检查the docs of redux for bindActionCreators

我希望这会有所帮助

Answer 2

RowB用于将调度功能传递到您的商店不知道的组件中，因为您无论如何都在class DisplayGrid<T> where T : class { public List<T> allRows; public DisplayGrid() { this.allRows = new List<T>(); } public bool hasRowMsgs { get { bool blnRowsValid = true; foreach (T r in this.allRows) { if (!(r.isAValidRow)) { blnRowsValid = false; break; } } return blnRowsValid; } } public bool isAValidTable { get { if (this.hasRowMsgs == false) { return true; } else { return false; } } } } class RowA { public List<string> rowMsgs; public RowA() { rowMsgs = new List<string>(); } public bool isAValidRow { get { return (this.rowMsgs.Count == 0) ? true : false; } } } class RowB { public List<string> rowMsgs; public RowB() { rowMsgs = new List<string>(); } public bool isAValidRow { get { return (this.rowMsgs.Count == 0) ? true : false; } } }中使用bindActionCreators，所以根本不需要它（无论如何）您实现的方法有点错误，欢迎您在https://redux.js.org/api/bindactioncreators上查看文档）。

只需使您的mapDispatch尽可能基本：

mapDispatchToProps

＃编辑

您可以在connect上添加以下检查器：const mapDispatchToProps = (dispatch) => ({ getAllSprints: () => dispatch(getSprints()), });是函数（该行在Redux上下文设置后执行），以及一个useEffect依赖项以再次运行效果（如果没有< / p>

getAllSprint

Answer 3

如果您有多个动作，并且想要绑定所有动作，则可以按照以下步骤操作

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()),
 });

React Redux TypeError-不是函数

3 个答案: