Redux Toolkit中实现查询端点初始数据的方案探讨

在Redux Toolkit项目中，开发者有时会遇到需要为RTK Query端点提供初始数据的需求。本文将深入探讨这一场景下的解决方案及其技术考量。

初始需求场景

在服务端渲染(SSR)应用中，我们经常需要在页面加载时就展示部分数据，这些数据可能由后端直接注入到HTML页面中。当使用RTK Query时，开发者希望这些预渲染数据能够作为查询端点的初始状态，避免不必要的API请求。

典型场景包括：

• 服务端预渲染页面时已经获取了用户数据
• 希望避免组件首次渲染时触发重复请求
• 需要确保数据一致性，防止"数据回退"现象

解决方案分析

直接初始化方案

最直观的想法是在创建API时直接指定初始数据：

const initialState = window.globalInitialState.user;
const api = createApi({
  endpoints: (builder) => ({
    getUser: builder.query({
      query: '/api/user',
      initialState, // 期望的初始化方式
    })
  }),
});

然而，这种方案存在潜在问题：

1. 可能导致数据时间线混乱（如显示3am数据后获取5pm数据，组件卸载后又显示3am数据）
2. 与RTK Query的缓存机制存在冲突
3. 不符合Redux单向数据流原则

推荐解决方案：状态水合(Rehydration)

Redux Toolkit官方推荐使用状态水合机制来实现初始数据的注入：

1. 服务端准备：

   • 在服务端使用RTK Query获取数据
   • 将API slice状态序列化后注入到HTML中

2. 客户端配置：

createApi({
  extractRehydrationInfo(action) {
    if (action.type === "rehydrateMe") return action.payload;
  },
});

3. 客户端初始化：

// 在创建store后立即分发水合action
store.dispatch({ type: "rehydrateMe", payload: window.__INITIAL_STATE__ });

技术细节说明

水合过程的核心是精确还原RTK Query的内部状态结构。完整的水合状态应包含：

{
  queries: {
    "getUser()": {
      status: 'fulfilled',
      endpointName: 'getUser',
      requestId: nanoid(),
      originalArgs: "",
      startedTimeStamp: Date.now(),
      data: initialData,
      fulfilledTimeStamp: Date.now()
    }
  },
  mutations: {},
  provided: {},
  subscriptions: {}
}

非JavaScript后端的处理方案

当后端不使用JavaScript时，可以采用以下方法：

1. 开发环境先使用Node.js生成一次水合状态样本
2. 在后端其他语言中按照相同结构生成状态对象
3. 注意保持数据结构与RTK Query版本兼容

实现注意事项

1. 时序控制：确保水合action在React组件挂载前分发
2. 参数匹配：对于带参数的查询，需要确保originalArgs与实际查询参数一致
3. 错误处理：考虑初始数据可能过期的情况，提供刷新机制
4. 性能优化：避免过大初始状态影响首屏加载

替代方案比较

1. 组件级默认值：

   const {data = initialState} = useGetUserQuery();
   

   • 优点：简单直接
   • 缺点：仍会触发API请求

2. 手动更新缓存：

   dispatch(api.util.updateQueryData('getUser', undefined, (draft) => {
     Object.assign(draft, initialState);
   });
   

   • 优点：灵活控制
   • 缺点：需要手动管理时序

总结

在Redux Toolkit生态中，状态水合是处理初始数据最健壮的方案。虽然需要一定的配置工作，但它确保了：

• 数据一致性
• 良好的开发者体验
• 与Redux设计原则的契合

对于特殊场景，开发者可以在理解内部机制的基础上，选择最适合项目需求的解决方案。