redux中如何避免重复定义每个异步action 的开始请求，请求成功，请求失败状态？

Question

主要是想根据不同的请求状态来进行不同的组件渲染，比如开始请求，就将组件渲染为 loading，请求成功就开始渲染数据列表等等。

这里有个问题，如果把这三个action 定义成全局的，然后要用到再引入的话，那这样当我进入第一个页面，状态依次经历了请求中，请求成功。 当我进入第二个页面的时候，这时候请求状态已经是成功的状态了，那我那些需要有数据才能渲染的组件，这个时候就会报错了（因为一进来的时候，判断到状态已经是 成功了，所以就渲染，此时是没有数据的）

求指教一种可行的方案~

Answer 1

其实不必这样，axios有一个全局拦截器，可以拦截发送请求和接受请求。然后你写一个loading组件，在全局拦截器中引入，发送请求时候渲染loading，结束后隐藏loading。至于你说的渲染数据的问题，可以在组件内利用条件渲染来做。有数据就渲染，没有数据就渲染null。具体代码如下：

import axios from 'axios';
import { Toast } from 'antd-mobile';
axios.interceptors.request.use((config)=>{
    Toast.loading('加载中',0);
    return config
});
axios.interceptors.response.use((config)=>{
    Toast.hide();
    return config
});