无法读取 Redux thunk 操作中未定义的属性 'then'

Question

我是 React、Redux 和 Thunk 的新手，一直在关注有关该主题的教程，最近一次是在 Pluralsight 上 Building Applications with React and Redux in ES6。我一直在将本教程从 ES6 转换为 Typescript 3，将 React v3 转换为 React v4。

我遇到了很多我能够按照此模式解决的问题（尤其是与路由相关的所有问题），但我遇到了一个我无法解决的问题。来自各种来源 inc Cannot read 属性 '.then' of undefined when testing async action creators with redux and react 听起来我不能在一个 return 无效的函数上有一个 .then() 函数，但它是一个异步函数（应该） return 一个承诺，但是智能感知另有说明。下面的代码。

saveCourse = (event: any) => {
    event.preventDefault();
    this.props.actions.saveCourse(this.state.course)
        .then(this.setState({ fireRedirect: true }));
}

上面的代码在我的组件上，props.actions 通过 mapStateToProps 连接到 redux store 并且这个函数在按钮点击时被调用。上面这个函数的 .then() 出错了。此函数调用下面的操作

export const saveCourse = (course: Course) => {
    return (dispatch: any, getState: any) => {
        dispatch(beginAjaxCall());
        courseApi.saveCourse(course).then((savedCourse: Course) => {
            course.id ? dispatch(updateCourseSuccess(savedCourse)) :
                dispatch(createCourseSuccess(savedCourse));
        }).catch(error => {
            throw (error);
        });
    }
}

上面的动作是异步调用，这里的.then()没有错误但是VS Code说整个saveCourse函数returns void.

从教程中确实没有任何应该有所作为的差异（箭头函数而不是常规等...）所以我想知道我遗漏但不确定的版本之间是否有模糊的变化在哪里看，可能会遗漏一些基本的东西。谁能看出为什么我不能在 saveCourse() 函数上执行 .then()？

如果您需要更多信息，请告诉我。

编辑：courseApi 只是一个模拟 api，代码如下。

import delay from './delay';

const courses = [
{
    id: "react-flux-building-applications",
    title: "Building Applications in React and Flux",
    watchHref: "http://www.pluralsight.com/courses/react-flux-building-applications",
    authorId: "cory-house",
    length: "5:08",
    category: "JavaScript"
},
{
    id: "clean-code",
    title: "Clean Code: Writing Code for Humans",
    watchHref: "http://www.pluralsight.com/courses/writing-clean-code-humans",
    authorId: "cory-house",
    length: "3:10",
    category: "Software Practices"
},
{
    id: "architecture",
    title: "Architecting Applications for the Real World",
    watchHref: "http://www.pluralsight.com/courses/architecting-applications-dotnet",
    authorId: "cory-house",
    length: "2:52",
    category: "Software Architecture"
},
{
    id: "career-reboot-for-developer-mind",
    title: "Becoming an Outlier: Reprogramming the Developer Mind",
    watchHref: "http://www.pluralsight.com/courses/career-reboot-for-developer-mind",
    authorId: "cory-house",
    length: "2:30",
    category: "Career"
},
{
    id: "web-components-shadow-dom",
    title: "Web Component Fundamentals",
    watchHref: "http://www.pluralsight.com/courses/web-components-shadow-dom",
    authorId: "cory-house",
    length: "5:10",
    category: "HTML5"
}
];

function replaceAll(str: any, find: any, replace: any) {
return str.replace(new RegExp(find, 'g'), replace);
}

//This would be performed on the server in a real app. Just stubbing in.
const generateId = (course: any) => {
return replaceAll(course.title, ' ', '-');
};

class CourseApi {
static getAllCourses() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(Object.assign([], courses));
        }, delay);
    });
}

static saveCourse(course: any) {
    course = Object.assign({}, course); // to avoid manipulating object         passed in.
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            // Simulate server-side validation
            const minCourseTitleLength = 1;
            if (course.title.length < minCourseTitleLength) {
                reject(`Title must be at least ${minCourseTitleLength} characters.`);
            }

            if (course.id) {
                const existingCourseIndex = courses.findIndex(a => a.id == course.id);
                courses.splice(existingCourseIndex, 1, course);
            } else {
                //Just simulating creation here.
                //The server would generate ids and watchHref's for new courses in a real app.
                //Cloning so copy returned is passed by value rather than by reference.
                course.id = generateId(course);
                course.watchHref = `http://www.pluralsight.com/courses/${course.id}`;
                courses.push(course);
            }

            resolve(course);
        }, delay);
    });
}

static deleteCourse(courseId: any) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const indexOfCourseToDelete = courses.findIndex(course =>
                course.id == courseId
            );
            courses.splice(indexOfCourseToDelete, 1);
            resolve();
        }, delay);
    });
}
}

export default CourseApi;

Answer 1

您遇到的问题是您没有return在您的 Action Creator 中兑现承诺。

在此处查看 redux-thunk 的示例：

https://github.com/reduxjs/redux-thunk

function makeASandwichWithSecretSauce(forPerson) {

  // Invert control!
  // Return a function that accepts `dispatch` so we can dispatch later.
  // Thunk middleware knows how to turn thunk async actions into actions.

  return function (dispatch) {
    return fetchSecretSauce().then(
      sauce => dispatch(makeASandwich(forPerson, sauce)),
      error => dispatch(apologize('The Sandwich Shop', forPerson, error))
    );
  };
}

他们正在 return 兑现 fetchSecretSauce 的承诺。

您需要类似地return您示例中的承诺：

export const saveCourse = (course: Course) => {
    return (dispatch: any, getState: any) => {
        dispatch(beginAjaxCall());
        return courseApi.saveCourse(course).then((savedCourse: Course) => {
            course.id ? dispatch(updateCourseSuccess(savedCourse)) :
                dispatch(createCourseSuccess(savedCourse));
        }).catch(error => {
            throw (error);
        });
    }
}

Answer 2

除了在您的 Action Creator 中返回承诺外，您可能还想确保在您的 mapDispatchToProps 中声明映射的相应函数 async。可能await里面的dispatch语句

我运行遇到了一个类似的问题，错误消息完全相同，但除了返回承诺之外，这是我一开始没有注意到的其他事情。

无法读取 Redux thunk 操作中未定义的属性 'then'

Cannot read property 'then' of undefined on Redux thunk action

reactjs

redux

redux-thunk

react-redux

无法读取 Redux thunk 操作中未定义的 属性 'then'

Cannot read property 'then' of undefined on Redux thunk action

reactjs

redux

redux-thunk

react-redux

无法读取 Redux thunk 操作中未定义的属性 'then'