我是React，Redux和Thunk的新手，并且一直在关注有关该主题的教程，最近一次是在Pluralsight上的ES6中使用React和Redux构建应用程序。我一直在将本教程从 ES6 转换为 Typescript 3，将 React v3 转换为 React v4。
我遇到了很多我能够按照这种模式解决的问题(最值得注意的是任何与路由相关的问题(，但我遇到了一个我无法解决的问题。来自各种来源 inc 在使用 redux 和 react 测试异步操作创建者时无法读取未定义的属性".then" 听起来我不能在返回 void 的函数上有一个.then()函数，但它是一个(应该(返回承诺的异步函数，但智能感知另有说法。下面的代码。
saveCourse = (event: any) => {
event.preventDefault();
this.props.actions.saveCourse(this.state.course)
.then(this.setState({ fireRedirect: true }));
}
上面的代码在我的组件上，props.actions通过mapStateToProps连接到 redux 存储，单击按钮时调用此函数。是上述函数的.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);
});
}
}
上面的操作是 asyc 调用，这里的.then()没有错误，但 VS Code 说整个saveCourse函数返回 void。
从教程中，确实没有任何差异应该有所作为(箭头函数而不是常规函数等(，所以我想知道我缺少的版本之间是否有模糊的变化，但不确定在哪里查找，并且可能缺少一些基本的东西。谁能明白为什么我不能对saveCourse()功能进行.then()？
如果您需要更多信息，请告诉我。
编辑：课程Api只是一个模拟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;
您遇到的问题是您没有在操作创建器中返回承诺。
看看这里的 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))
);
};
}
他们正在回报fetchSecretSauce产生的承诺。
您需要在示例中类似地返回承诺：
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);
});
}
}
除了在操作创建器中返回承诺之外，您可能还需要确保在您的mapDispatchToProps中，映射的相应函数应该声明为async。它可能会await里面的调度语句。
我遇到了类似的问题，错误消息完全相同，但除了返回承诺之外，这是我一开始没有注意到的其他事情。