在非React组件的文件中使用Reudx 会造成的问题及解决方案

Redux的使用场景

• 函数式组件内（hooks调用redux）
• 其他文件（无法使用hooks调用redux）

这里函数式组件内使用Redux不再赘述，站内跳转，Redux toolkit使用

一、非函数式组件的文件内使用redux

useDispatch 和 useSelector 这两个hooks只能在函数组件内使用，在非函数组件的文件（以下简称三方文件）就无法使用了。
有些人就会说简单啊，直接把redux 里的store引过来。恭喜你，你很可能造成了一个很大的隐患。

下面就来详细说说，redux store是单例，是通过注入的方式使得你能在下面所有层级的组件中使用他，<Provider store={store}><App /></Provider>，但是三方文件明显无法直接使用他。
当然直接拿到store示例然后使用上面的方法，肯定是能改变，但是通常会造成一个问题那就是会导致循环依赖。循环依赖可能会直接蹦掉你的程序。

站内跳转，循环依赖及解决方法

可以看到上面链接中造成循环依赖的根本原因就是在这里 login.ts => http.ts ，
构成了循环依赖 store.ts => authSlice.ts => login.ts => http.ts => store.ts

所以直接在http.ts 中引入store实例的方式是错误且不科学的。

二、解决方案

http.ts 文件

import type { Appstore } from "@/redux/store";

// 读取注入的store（非组件文件）
let store: Appstore;
export const injectStore = (_store: Appstore) => {
  store = _store;
};

this.service.interceptors.request.use(
  (request: AdaptAxiosRequestConfig) => {
    const { token } = store.getState().users;
  }
);

入口文件中 main.tsx 文件

import { store } from "@/redux/store.ts";
import { injectStore } from "@/api";
// store注入axios（非react组件文件）
injectStore(store);