导入store至.ts文件时App崩溃，TypeError报错求助

问题分析 #

你遇到的报错本质是访问tabsData时，它的父对象（比如state.EditorTabsDataSliceReducer）为undefined，结合循环依赖的嫌疑，大概率是模块加载顺序导致store初始化不完整，或是api模块直接导入store形成了循环引用链（例如store → 某reducer → api → store）。

具体解决方案 #

1. 移除api模块对store的直接依赖

你的api/index.ts直接导入store调用dispatch，这是循环依赖的高发点。改成将dispatch作为参数传入api函数，而非硬编码导入：

修改api/index.ts：

import { pushNotification } from 'containers/ToastNotifications/store/ToastNotificationSlice';
import { defaultEnv } from './utils/constants';
import type { AppDispatch } from 'store'; // 仅导入类型，避免实际引用

export const post = async ({ key, body, dispatch }: PostType & { dispatch?: AppDispatch }) => {
  const apiUrl = process.env?.API_URL || defaultEnv.API_URL;

  const response = await fetch(`${apiUrl}${key}`, {
    method: 'POST',
    headers: {
      Accept: 'application/json', // 修正你之前的拼写错误：application.json → application/json
      'Content-Type': 'application/json',
    },
    body,
  });

  if (!response.ok) {
    const message = ((await response.json()) as PostErrorResponseType).Error;
    dispatch?.(
      pushNotification({ status: LoadingStatusesEnum.ERROR, message })
    );
    throw new Error(message);
  }

  dispatch?.(
    pushNotification({
      status: LoadingStatusesEnum.SUCCESS,
      message: 'shared.Success',
    })
  );

  return { data: await response.json() }; // 补充await，否则返回的是Promise对象
};

在组件中调用post时，通过useDispatch获取dispatch并传入：

import { useDispatch } from 'react-redux';
import { post } from 'api';
import type { AppDispatch } from 'store';

const MyComponent = () => {
  const dispatch = useDispatch<AppDispatch>();

  const handleSubmit = async () => {
    try {
      await post({
        key: '/some-endpoint',
        body: JSON.stringify({ data: 'test' }),
        dispatch,
      });
    } catch (e) {
      // 自定义错误处理逻辑
    }
  };

  return <button onClick={handleSubmit}>Submit</button>;
};

2. 排查reducer的循环引用问题

检查所有reducer（比如EditorTabsDataSliceReducer）是否导入了api模块执行异步操作——reducer必须是纯函数，不能包含异步调用或直接引用api。如果存在这种情况，把异步逻辑迁移到Redux Thunk或RTK Query中：

示例（用RTK的createAsyncThunk）：

// 在EditorTabsDataSliceReducer文件中
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import { post } from 'api';

export const fetchTabsData = createAsyncThunk(
  'editorTabs/fetchData',
  async (payload, { dispatch }) => {
    const response = await post({
      key: '/tabs-data',
      body: JSON.stringify(payload),
      dispatch,
    });
    return response.data;
  }
);

const editorTabsSlice = createSlice({
  name: 'editorTabs',
  initialState: { tabsData: [] },
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(fetchTabsData.fulfilled, (state, action) => {
      state.tabsData = action.payload;
    });
  },
});

export default editorTabsSlice.reducer;

3. 在组件中添加可选链保护

在index.tsx访问store状态时，用可选链避免因state未初始化导致的报错：

import { useSelector } from 'react-redux';
import type { RootState } from 'store';

const tabsData = useSelector((state: RootState) => state.EditorTabsDataSliceReducer?.tabsData || []);

4. 确保store初始化顺序正确

保证store在所有组件和reducer之前完成初始化，比如在index.tsx中先渲染Provider再挂载其他组件：

import { Provider } from 'react-redux';
import { store } from 'store';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <Provider store={store}>
    <App />
  </Provider>
);

内容的提问来源于stack exchange，提问作者Egor