如何用服务端数据全局初始化Redux Store？CRA环境遇阻

方案1：在应用入口异步获取数据后再初始化Store并渲染 #

这是最直接且兼容CRA的方案，确保Store初始化时已有完整的服务端数据：

1. 抽离Store创建逻辑为可接收预加载状态的函数
2. 在入口文件中先异步拉取初始化数据，再用数据创建Store并渲染应用

// store.ts
import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducers';

// 定义RootState类型，根据你的reducer结构调整
export type RootState = ReturnType<typeof rootReducer>;

export const createStore = (preloadedState?: RootState) => {
  return configureStore({
    reducer: rootReducer,
    preloadedState,
  });
};

// index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { createStore } from './store';
import App from './App';
import { getInitializationData } from './api';

async function bootstrap() {
  // 先获取服务端初始化数据
  const initialData = await getInitializationData();
  // 用数据初始化Store
  const store = createStore(initialData);

  const root = ReactDOM.createRoot(
    document.getElementById('root') as HTMLElement
  );
  root.render(
    <React.StrictMode>
      <Provider store={store}>
        <App />
      </Provider>
    </React.StrictMode>
  );
}

bootstrap();

方案2：应用启动后通过Redux异步Action加载初始化数据 #

适合对首屏启动速度有要求的场景，先渲染加载状态，再异步获取数据更新Store：

1. 创建处理初始化数据的异步Thunk和Slice
2. 在根组件中触发初始化Action，根据状态展示加载/错误/内容

// slices/initializationSlice.ts
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import { getInitializationData } from '../api';

// 定义异步获取初始化数据的Thunk
export const fetchInitialData = createAsyncThunk(
  'initialization/fetchInitialData',
  async () => {
    const response = await getInitializationData();
    return response;
  }
);

const initializationSlice = createSlice({
  name: 'initialization',
  initialState: {
    data: {},
    status: 'idle', // idle/loading/succeeded/failed
    error: null,
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchInitialData.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchInitialData.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.data = action.payload;
      })
      .addCase(fetchInitialData.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message || '加载初始化数据失败';
      });
  },
});

export default initializationSlice.reducer;

// store.ts
import { configureStore } from '@reduxjs/toolkit';
import initializationReducer from './slices/initializationSlice';
// 引入其他reducer...

export const store = configureStore({
  reducer: {
    initialization: initializationReducer,
    // 其他reducer...
  },
});

// App.tsx
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchInitialData } from './slices/initializationSlice';

function App() {
  const dispatch = useDispatch();
  const { status, data, error } = useSelector((state) => state.initialization);

  // 应用启动时触发初始化数据加载
  useEffect(() => {
    if (status === 'idle') {
      dispatch(fetchInitialData());
    }
  }, [dispatch, status]);

  // 根据状态展示不同内容
  if (status === 'loading') {
    return <div>加载中...</div>;
  }

  if (status === 'failed') {
    return <div>错误：{error}</div>;
  }

  return (
    // 这里可以使用data中的初始化数据渲染应用
    <div>应用内容</div>
  );
}

export default App;

方案3：暴露CRA配置启用顶层await（不推荐） #

如果必须使用顶层await，可通过npm run eject暴露webpack配置，然后修改：

1. 在webpack.config.js中添加experiments: { topLevelAwait: true }
2. 确保tsconfig.json的target设置为ES2022或更高

但此操作不可逆，后续无法享受CRA的自动更新维护，仅作为备选方案。

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