React Native 和 Redux：Require 循环（如何摆脱它？）答案

【问题标题】：React native and Redux: Require cycle (how to get rid of it?)React Native 和 Redux：Require 循环（如何摆脱它？）
【发布时间】：2021-08-10 00:21:57
【问题描述】：

在一个新的 RN 应用程序的主干上工作时，我发现自己处于以下代码状态：

src/redux/index.ts（创建和导出商店）将 rootReducer 文件导入到 configureStore。

const persistedReducer = persistReducer(persistConfig, rootReducer);
const store = configureStore({
  reducer: persistedReducer,
  /* middleware definitions */
});

rootReducer 导入 userReducer 以使用 combineReducers 将其添加到减速器列表中。

const rootReducer = combineReducers({
  /* some reducers */
  user: userReducer,
});

userReducer 导入 serverApi 以便能够使用 thunk 进行 api 调用。

export const registerUser = createAsyncThunk(
  'user/register',
  async ({ country, number }: loginDataType) => {
    const response = await serverApi.post('/register', { country, number });
    return response.data;
  },
);

serverApi 导入 store 以从用户那里获取 token 并将其设置在 Axios 拦截器中。

instance.interceptors.request.use(
  async config => {
    const { token } = store.getState().user;
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
);

正如我所说，商店在src/redux/index.ts 中导出。你去吧，这就是循环。 React 给我一个警告，比如，拜托，不要那样做。我哪里出错了，或者我可以做些什么不同的事情？

【问题讨论】：

标签： reactjs react-native react-redux redux-thunk

【解决方案1】：

所以，文档实际上给出了这个用例的答案。

https://redux.js.org/faq/code-structure#how-can-i-use-the-redux-store-in-non-component-files

我们基本上不是在 api 文件中导入 store，而是从 store 文件本身注入它：

export const injectStore(_store) {
  store = _store
}

在商店文件中：

injectStore(store);

【讨论】：