在一个 react 组件中,我想调度一个异步操作,然后当它完成时,调度一个取决于异步操作添加的值的同步操作。使用 redux-thunk,到目前为止,我已经:
/* actionCreators.js */
export function refresh() {
return function(dispatch) {
return services.getData().then(response => {
return new Promise(resolve => {
dispatch(addData(response.data))
resolve()
})
})
}
}
/* myComponent.js */
refreshData = id => {
this.props.dispatch(refresh(id)).then(() => {
this.props.handleChange(id)
})
}
这实际上是有效的,但似乎有很多嵌套代码,我想知道是否有更标准的方法来处理这个异步。
最佳答案
您在异步操作完成后执行逻辑的总体策略是正确的,您需要从 thunk 返回一个 promise ,然后使用 then()
在其他地方 Hook 完成。
也就是说,为了帮助精简代码,您可以进行的第一个更改与 Promise 构造函数有关。您可以更改 refresh()
实现到
export function refresh() {
return function(dispatch) {
return services.getData().then(response => {
return dispatch(addData(response.data));
}
}
}
这是因为 .then()
的类型在Promise<T>
上是 then<S>(callback: T => S): Promise<S>
,表示调用 then
的结果是另一个 promise ,因此您无需构建自己的 promise 。
此外,看起来您正在混合标准 function
与粗箭头 ( =>
) 语法保持一致并使用 =>
的语法Everywhere 也可以帮助精简你的代码:
export const refresh = () =>
dispatch => services.getData()
.then(response => dispatch(addData(response.data));
/* myComponent.js */
refreshData = id => this.props.dispatch(refresh(id))
.then(() => this.props.handleChange(id));
关于javascript - 如何在异步 thunk 完成后干净地执行同步操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48230952/