Возврат результата от отправки к компоненту вызывает исключение «неопределенное» - PullRequest
Новая
       51

Возврат результата от отправки к компоненту вызывает исключение «неопределенное»

1 голос
/ 01 марта 2020

У меня есть следующий метод внутри файла данных-операций tsx: 

export function EnrollStudent(student, courseId) {
  return dispatch => {
    dispatch(enrollUserBegin());

    axios
      .post("api/Course/EnrollStudent/" + courseId + "/" + student.id)
      .then(response => {
        if (response.data === 1) {
          dispatch(enrollUserSuccess(student, courseId));

          console.log("Student is enrolled.");
          toast.success("Student is enrolled successfully.", {
            position: toast.POSITION.TOP_CENTER
          });
        } else {
          dispatch(enrollUserSuccess(null, 0));
          console.log("Failed to enroll.");
          toast.warn(
            "Failed to enroll the student. Possible reason: Already enrolled.",
            {
              position: toast.POSITION.TOP_CENTER
            }
          );
        }
      })
      .catch(error => {
        dispatch(enrollUserFailure(error));

        toast.warn("An error occurred. Please contact the Admin.", {
          position: toast.POSITION.TOP_CENTER
        });
      });
  };
}

Этот метод вызывается из другого компонента нажатием кнопки: 

const enroll_onClick = e => {
  e.preventDefault();
  const currentUserId = authenticationService.currentUserValue["id"];
  var student: any = { id: currentUserId };
  props.enrollStudent(student, st_courseId);
};

const mapDispatchToProps = dispatch => {
    return {
            enrollStudent: (student, courseId) => dispatch(EnrollStudent(student, courseId)),
        }
}

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

Это работает хорошо и база данных обновляется правильно. Но я хочу получить результат enrollStudent и выполнить действие (например, перейти на другую страницу).

Я пробовал это, но я получил props.enrollStudent() is undefined ошибку. 

props.enrollStudent(student, st_courseId)
.then(() => {
    console.log("enrolld");
    history.push('/courses');
 });

Есть предложения?

Ответы [ 2 ]

4 голосов
/ 09 марта 2020

Глядя на код, я предполагаю, что вы используете промежуточное ПО redux-thunk.

В функции EnrollStudent вы должны добавить оператор return перед axios (строка 5) чтобы ваша функция thunk (функция, возвращаемая EnrollStudent) возвращала обещание.

Взгляните на примеры здесь: https://github.com/reduxjs/redux-thunk, особенно функция makeASandwichWithSecretSauce .

2 голосов
/ 09 марта 2020

Вы не должны использовать обещания в создателях действий ... вы можете вернуть только объект действия ... https://redux.js.org/api/store/

В этом случае (сторона эффекты) необходимо использовать промежуточное ПО (redux-thunk, redux-promise, redux-saga) ... https://redux.js.org/api/applymiddleware/

Если промежуточное программное обеспечение не используется. .. текущее поведение (выглядит как частично работающее), по крайней мере, , по крайней мере, вводит в заблуждение .

...