У меня есть действие reducex thunk, которое извлекает некоторые данные, а затем отправляет некоторые действия (здесь не показано в коде, но вы сможете найти его в демонстрационной ссылке ниже)
export const fetchPosts = (id: string) => (dispatch: Dispatch<TActions>) => {
return fetch('http://example.com').then(
response => {
return response.json().then(json => {
return "Success message";
});
},
err => {
throw err;
}
);
};
и чем в моем компоненте я использую mapDispatchToProps
с bindActionCreators
для вызова этой функции из моего компонента следующим образом:
public fetchFunc() {
this.props.fetchPosts("test").then(
res => {
console.log("Res from app", res);
},
err => {
console.log("Err from app", err);
}
);
}
Поскольку я использую машинопись, мне нужно определить тип этой функции в реквизитах
interface IProps {
name?: string;
posts: IPost[];
loading: boolean;
fetchPosts: (id: string) => Promise<string | Error>;
}
Если я сделаю это, как описано выше, TypScript будет жаловаться на то, что я должен это сделать:
fetchPosts: (id: string) => (dispatch: Dispatch<TActions>) => Promise<string | Error>;
Если я это сделаю - так оно и будет, тогда Typcript жалуется, когда я использую then
в своем компоненте, говоря, что эта функция не является обещанием.
Я создал демоверсию, где вы можете играть с кодом
Нажатие "Load from remote" иногда может быть просто для того, чтобы убедиться, что обещание: