[英]what will be best Approach for Redux-thunk Async Request to handle onSuccess and onError?
what should be the best approach to manage Redux-Thunk async requests. 什么应该是管理Redux-Thunk异步请求的最佳方法。 like I'm posting some data on server and the connected component will check the errors by
就像我在服务器上发布一些数据一样,连接组件会检查错误
Approach 1: I just return new Promise in my action creators to check resolve or reject by using then 方法1:我只是在我的动作创建者中返回新的Promise来检查解决或拒绝使用then
const update = (todoId, isDone) => (dispatch) =>
new Promise(function(resolve, reject) {
dispatch({
type: 'SET_SAVING',
saving: true
});
// Function is expected to return a promise
callUpdateApi(todoId, isDone).then(updatedTodo => {
dispatch({
type: 'SET_SAVING',
saving: false
});
resolve(updatedTodo);
}).catch(error => {
// TBD: Handle errors for Redux
reject(error);
})
});
Approach 2: using dispatch to manage error in render method by if-else conditions 方法2:使用dispatch通过if-else条件管理render方法中的错误
const update = (todoId, isDone) => (dispatch) => {
dispatch({
type: 'SET_SAVING',
saving: true
});
// Function is expected to return a promise
callUpdateApi(todoId, isDone).then(updatedTodo => {
dispatch({
type: 'SET_SAVING',
saving: false
});
});
// TBD: Handle errors
}
please help me find the best solution for this should I go with "return Promise" from Action creators or just using the dispatch actions to store for error and success handling always. 如果我使用Action创建者的“return Promise”或者仅使用调度操作存储错误和成功处理,请帮助我找到最佳解决方案。 because onsuccess I need to do some stuff in my component and on error also
因为onsuccess我需要在我的组件中做一些事情并且也出错
const update = (todoId, isDone) => (dispatch) =>
new Promise(function(resolve, reject) {
dispatch({
type: 'SET_SAVING',
saving: true
});
// Function is expected to return a promise
callUpdateApi(todoId, isDone).then(updatedTodo => {
dispatch({
type: 'SET_SAVING',
saving: false
});
resolve(updatedTodo);
}).catch(error => {
// TBD: Handle errors for Redux
reject(error);
})
});
If your callUpdateApi
returns a promise you don't have to wrap your whole action in a promise, just can just return callUpdateApi
. 如果您的
callUpdateApi
返回一个promise,您不必将整个操作包装在一个promise中,只需返回callUpdateApi
。 As for error handling, the common way is to set a flag somewhere in your redux state along with the saving
flag for example to know when an error occured. 至于错误处理,常见的方法是在redux状态的某处设置一个标志以及
saving
标志,例如知道何时发生错误。 Your components will then receive those flags and do something with them 然后,您的组件将接收这些标志并对其执行某些操作
const update = (todoId, isDone) => (dispatch) => {
dispatch({
type: 'SET_SAVING',
saving: true
});
return callUpdateToApi(todoId, isDone).then(updatedTodo => {
dispatch({
type: 'SET_SAVING',
saving: false,
// Do something with your API response
// e.g. update your redux store via a reducer
updatedTodo
});
})
.catch(err => {
// Handle error, for example set a error flag
// in your redux state so your components know an error occured
dispatch({
type: 'SET_SAVING',
saving: false,
error: true
});
});
}
Connect your component so that they can access error
and saving
flags and for example display an error when your call failed: 连接您的组件,以便他们可以访问
error
和saving
标志,例如在呼叫失败时显示错误:
export default connect(
state => ({
error: state.module.error,
saving: state.module.saving
})
)(Component);
// Inside your JSX
{this.props.error && <p>An error occured</p>}
the best practice we use is each thunk action dispatched 3 actions: 我们使用的最佳做法是为每个重击动作分配3个动作:
callUpdateApi
is a promise then just return it in your thunk like this: callUpdateApi
是一个承诺,然后在你的thunk中返回它,如下所示:
const update = (params) => (dispatch) => {
dispatch(started())
return callUpdateApi(params)
.then(result => dispatch(succeeded(result)))
.catch(error => dispatch(failed(error)))
}
and inside the reducer you can toggle the saving
flag for started set it to true
and for succeeded or failed set it to false
that's it. 在reducer中,你可以切换
saving
标志,将其设置为true
,对于成功或失败,将其设置为false
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.