我怎么能等到我在React中得到调度结果

Question

考虑以下代码：

const onSubmit = (data) => {
dispatch(Actions.updatedUser(data))
navigation.navigate('xxxx')
}

当我调用Submit函数时，我们想等到调度完成后再导航，这里我该怎么做？

这是我的行动：

export const updatedUser = (model) => {
return dispatch => {
api
.patch("/xxx")
.then(response => { return response.data['data'] })
.then(result => {
dispatch({ type: Actions.AUTH_UPDATE_USER, payload: result })
})
.catch(error => { })
}
}

我的减速器：

const initState = {
userInfo: undefined
}
export default (state = initState, action) => {
switch (action.type) {
case Actions.AUTH_UPDATE_USER:
return { ...state, userInfo: action.payload }
default:
return state;
}
}

Answer 1

以下是您可以做的：通过您的操作，您可以返回一个promise，该promise只有在调度完成时才能解析。类似这样的东西：

export const updatedUser = (model) => {
return dispatch => {
return new Promise((resolve, reject) => {
api
.patch("/xxx")
.then(response => { return response.data['data'] })
.then(result => {
dispatch({ type: Actions.AUTH_UPDATE_USER, payload: result })
resolve() // <<<< this!
})
.catch(error => { reject() })
})
}
}

现在，在您的组件代码中，您可以根据自己的偏好执行.then或async/await。以下是当时的情况：

const onSubmit = (data) => {
dispatch(Actions.updatedUser(data)).then(() => {
navigation.navigate('xxxx')
})
}

下面是一个示例的沙盒