reactjs - 无法读取 Redux thunk 操作上未定义的属性“then”
问题描述
我是 React、Redux 和 Thunk 的新手,并且一直在关注有关该主题的教程,最近在 Pluralsight 上的 ES6 中使用 React 和 Redux 构建应用程序。我一直在将本教程从 ES6 转换为 Typescript 3,并将 React v3 转换为 React v4。
我遇到了很多我能够按照这种模式解决的问题(尤其是与路由相关的任何问题),但我遇到了一个我无法解决的问题。从各种来源公司无法读取未定义的属性'.then'在使用redux测试异步操作创建者并做出反应
时听起来我不能.then()
在返回void的函数上有一个函数,但它是一个异步函数(应该)返回一个承诺,但智能感知另有说明。代码如下。
saveCourse = (event: any) => {
event.preventDefault();
this.props.actions.saveCourse(this.state.course)
.then(this.setState({ fireRedirect: true }));
}
上面的代码在我的组件上,props.actions
通过连接到 redux 存储,mapStateToProps
并且在按钮单击时调用此函数。就是.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。
从本教程来看,确实没有任何差异应该有所作为(箭头功能而不是常规等......)所以我想知道我缺少的版本之间是否有一个模糊的变化,但不确定在哪里看并且可以缺少一些基本的东西。谁能明白为什么我不能.then()
对这个saveCourse()
功能做一个?
如果您需要更多信息,请告诉我。
编辑: 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;
解决方案
您遇到的问题是您没有在 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))
);
};
}
他们正在返回由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);
});
}
}
推荐阅读
- flutter - 使容器适合儿童尺寸
- python - python类多重继承中的方法覆盖
- python - Multipart POST 适用于 Python 请求,但不适用于 Crawler 中的 treq
- c - 检查静态库中定义的所有符号
- delphi - TStringList 到 TStringGrid
- javascript - 谷歌应用脚本中的 webapp javascript 函数
- python - 在设置 FLASK_APP 之后,Flask 运行给出错误而不是之前
- c# - WPF MVVM 如何使用 ShowDialog() 上的绑定预填充文本框?
- node.js - 如果不存在,请创建文件夹
- php - 使用 PHP 读取 CSV 文件时字符串长度不正确