如何解决一种使用createAsyncThunk触发多个异步操作的操作的干净方法
我们将延迟React-Redux Web应用的渲染,直到Redux存储中的几个异步应用初始化任务完成为止。
下面是设置商店的代码,然后触发了初始化操作:
export const setupStoreAsync = () => {
return new Promise((resolve,reject) => {
const store = setupStore()
store
.dispatch(fetchAppInitialization())
.then(unwrapResult)
.then(_ => resolve(store))
.catch(e => reject(e.message))
})
}
Promise拒绝非常重要,因为它用于在无法正确设置应用程序的情况下为用户呈现错误消息。这段代码非常好阅读,效果很好。
问题出在动作创建者上:
export const fetchAppInitialization = createAsyncThunk(
'app/initialization',(_,thunkApi) =>
new Promise((resolve,reject) =>
Promise.all([thunkApi.dispatch(fetchVersionInfo())]).then(results => {
results.map(result => result.action.error && reject(result.error))
})
)
)
此代码可以正常工作。如果这些操作中的任何一个失败,则承诺将被拒绝,并且用户会看到错误消息。但这很丑-它不像我们的常规动作创作者那么漂亮:
export const fetchVersionInfo = createAction('system/versionInfo',_ => ({
payload: {
request: { url: `/system/versionInfo` },},}))
我们有时会在fetchAppInitialization
中触发多个获取请求,因此肯定需要Promise.all
函数。我们希望能够使用Redux-Toolkit的createAction
语法来触发多个已承诺的操作,以缩短该操作的创建者,但是我不知道这是否可能。
注意:我正在使用redux-requests
处理我的axios请求。
甚至需要createAsyncThunk
吗?
解决方法
由于除了这个单一用例之外,我没有使用fetchAppInitialization
动作,所以我只是删除了它,并将逻辑直接移到setupStoreAsync
函数中。这有点紧凑。这不是最佳选择,因为仍然包含results.map
逻辑,但是至少我们不再使用createAsyncThunk
。
export const setupStoreAsync = () => {
return new Promise((resolve,reject) => {
const store = setupStore()
new Promise((resolve,reject) =>
Promise.all([store.dispatch(fetchVersionInfo())]).then(results => {
results.map(result => result.action.error && reject(result.error))
resolve()
})
)
.then(_ => resolve(store))
.catch(e => reject(e.message))
})
}
更新:我可以使用async/await
使代码更漂亮。
export const setupStoreAsync = async () => {
const store = setupStore()
const results = await Promise.all([store.dispatch(fetchVersionInfo())])
results.forEach(result => {
if (result.action.error) throw result.error
})
return store
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。