如何在二次封装的 axios 文件中引用 Redux
在 React 中,在二次封装的 axios 文件中引用 Redux 内容,可以通过以下步骤进行:
- 首先,确保你已经安装了 redux 和 react-redux 库。如果没有安装,可以使用以下命令安装:
npm install redux react-redux
- 在你的 axios 文件中,首先引入 redux 相关的内容:
import { useDispatch, useSelector } from 'react-redux';
- 在 axios 文件中,你可以使用
useDispatch和useSelector来访问 Redux 的内容。例如,你可以使用useDispatch来触发 Redux 的 action,使用useSelector来获取 Redux 的 state。
import axios from 'axios';
import { useDispatch, useSelector } from 'react-redux';
import { fetchDataSuccess, fetchDataFailure } from './actions';
const CustomAxios = axios.create({
// 这里是你的 axios 配置
});
CustomAxios.interceptors.response.use(
(response) => {
// 在请求成功时,使用 dispatch 触发 Redux 的 action 来更新 state
const dispatch = useDispatch();
dispatch(fetchDataSuccess(response.data));
return response;
},
(error) => {
// 在请求失败时,使用 dispatch 触发 Redux 的 action 来更新 state
const dispatch = useDispatch();
dispatch(fetchDataFailure(error));
return Promise.reject(error);
}
);
export default CustomAxios;
在上面的例子中,我们使用了 Redux 的useDispatch来触发fetchDataSuccess和fetchDataFailure两个 action,并使用response.data和error作为参数传递给 action。这样就可以在请求成功或失败时更新 Redux 的 state。
请注意,上述示例中的fetchDataSuccess和fetchDataFailure是示例 action,你需要根据你的具体情况来替换它们。
这样,你就可以在二次封装的 axios 文件中引用 Redux 的内容了。
原文地址: https://www.cveoy.top/t/topic/qBTx 著作权归作者所有。请勿转载和采集!