React Redux TypeError - это не функция - PullRequest
Новая
       70

React Redux TypeError - это не функция

0 голосов
/ 04 мая 2020

Я пытаюсь использовать 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,
});

Спасибо за ваше время и терпение.

Ответы [ 3 ]

0 голосов
/ 04 мая 2020

bindActionCreators используется для передачи функциональности отправки в компоненты, которые не известны вашему магазину, потому что вы все равно используете mapDispatchToProps внутри connect, в этом просто нет необходимости (во всяком случае, способ его реализации немного неправильный). добро пожаловать на https://redux.js.org/api/bindactioncreators для выполнения c).

Просто сделайте вашу карту как основную c максимально возможной: 

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

# Редактировать

Вы можете добавить в свой useEffect средство проверки, что getAllSprint является функцией (и эта строка выполняется после установки контекста Redux), и зависимость [ props[getAllSprint] ] запустить эффект снова, если не 

 useEffect(() =>
        typeof props[getAllSprint] == 'function' && props.getAllSprint()
       , [ props[getAllSprint] ])
0 голосов
/ 04 мая 2020

Если у вас есть несколько действий и вы хотите связать их все, вы можете просто сделать это следующим образом 

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()),
 });
0 голосов
/ 04 мая 2020

То, что вы пытаетесь достичь здесь, должно быть сделано либо с помощью redux-thunk (для отправки запроса API), либо redux-sagas (немного более сложный imo). Вы можете прочитать это руководство , которое очень полезно!

Ваша проблема в том, что ваше действие getSprints не возвращает объект со свойствами (тип, ... payload) как , описанный здесь . Если вместо этого вы используете действие getAllSprints, вы увидите, что оно будет работать.

Также проверьте документы Redux для bindActionCreators

Надеюсь, это поможет

...