首页 > 解决方案 > 使用 Redux 处理完整异步服务的最佳实践是什么?

问题描述

我想知道使用 Redux 处理带有错误、加载等的异步服务的最佳方法是什么,以及如何实现它?我目前正在使用 Promise 一个 axios 来处理 API 并调用 3 个动作请求,成功和失败:

export function requestExample(page = 1, category = "") 
    return dispatch => {
        dispatch(get_Request()); //set isLoading = true
        request.get(`/posts/myPosts`).then(
            response => {
                dispatch(get_Success(response.data)); //set isLoading = false, data = payload.data
            }
        ).catch(error=>{dispatch(get_Failure())}) //set isLoading = false, data = []
    }
}

我的响应形状对象:

{data: [], isLoading: false}

有一段时间我使用:

{data: [], isLoading: false, isLoadDone: false}

我在创建 axios 实例时使用 axios 拦截器来处理错误,并将我的所有错误堆叠起来,并在它们发生时将它们显示为模态。

request.interceptors.request.use(
  function (config) {
    return config;
  },
  function (error) {
    return Promise.reject(error);
  }
);

request.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    if (error.status !== 200)
      store.dispatch(openModal("alert", { title: "Lỗi", text: `Error code: ${error.status} <br> Error content: ${error.statusText} `, type: "Fail" }));
    return Promise.reject(error);
  }
);

我想要一些关于我的结构的评论,并更多地了解另一种以更好的性能和内存来处理异步服务的方法。谢谢!

标签: reactjsreact-reduxredux-async-actions

解决方案


推荐阅读