什么是最好的方法Redux-thunk异步请求来处理onSuccess和onError？

作者: 易米烊光
发布时间: 2024-12-13 09:57:32 (1月前)
转自：

3 条回复

0#
回复此人
一腔诗意喂了狗 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <pre> <code> 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); }) }); </code> </pre> <P> 如果你的 <code> callUpdateApi </code> 返回一个承诺，你不必将你的整个行动包装在一个承诺中，只需返回即可 <code> callUpdateApi </code> 。至于错误处理，常见的方法是在redux状态的某处设置一个标志 <code> saving </code> 例如，标记以确定何时发生错误。然后，您的组件将接收这些标志并对其执行某些操作 </p> <pre> <code> 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 }); }); } </code> </pre> <P> 连接您的组件以便他们可以访问 <code> error </code> 和 <code> saving </code> 标志，例如，当您的呼叫失败时显示错误： </p> <pre> <code> export default connect( state => ({ error: state.module.error, saving: state.module.saving }) )(Component); </code> </pre> <pre> <code> // Inside your JSX {this.props.error && <p>An error occured</p>} </code> </pre> </DIV>

编辑
1#
回复此人
一腔诗意 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我们使用的最佳实践是每个thunk动作调度3个动作： </p> <OL> <LI> 行动开始了 </LI> <LI> 行动成功了 </LI> <LI> 行动失败了 </LI> </醇> <P> <code> callUpdateApi </code> 是一个承诺然后只是在你的thunk返回它像这样： </p> <pre> <code> const update = (params) => (dispatch) => { dispatch(started()) return callUpdateApi(params) .then(result => dispatch(succeeded(result))) .catch(error => dispatch(failed(error))) } </code> </pre> <P> 在减速机内你可以切换 <code> saving </code> 标志为已开始设置为 <code> true </code> 并为成功或失败设置它 <code> false </code> 而已。 </p> </DIV>

编辑

登录后才能参与评论