从函数访问Redux Store后RTK持久化状态失效的解决求助

核心问题是你创建了两个完全独立的Redux Store实例：persistor是基于setupStore()生成的store创建的，但入口文件里又调用setupStore()生成了另一个全新的store传给Provider。这就导致PersistGate监听的store和应用实际使用的store完全不相关，状态更新自然不会触发持久化逻辑。

此外还有一处配置错误需要修正：根持久化配置的whitelist写了错误的reducer键名。

具体修复步骤 #

1. 统一Store实例，消除双实例问题 #

修改Store代码，移除提前创建的persistor，只保留setupStore函数：

export default function setupStore(preloadedState?: PreloadedState<RootState>) {
  const store = configureStore({
    reducer: persistedReducer,
    preloadedState,
    devTools: process.env.NODE_ENV !== 'production',
    middleware: getDefaultMiddleware => 
      getDefaultMiddleware({
        serializableCheck:  {
          ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
        }
      }).concat(logger),
  })
  return store
}

// 删掉这行提前创建persistor的代码
// export const persistor = persistStore(setupStore())

然后在入口文件中创建唯一的store实例，并基于它生成persistor：

// 创建唯一的应用Store实例
const store = setupStore();
// 基于这个store生成对应的persistor
const persistor = persistStore(store);

root.render(
  <Provider store={store}> {/* 使用同一个store实例 */}
    <BarsContextProvider>
      <PersistGate loading={null} persistor={persistor}> {/* 使用匹配的persistor */}
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </PersistGate>
    </BarsContextProvider>,
  </Provider>,
);

2. 修正根持久化配置的键名错误 #

Root Reducer里的rootPersistConfig中，whitelist写的dealerStoreReducer是reducer函数名，而rootReducer中对应的状态键是dealerStore，需要修正：

export const rootPersistConfig = {
  key: 'root',
  storage: storage,
  whitelist: ['dealerStore'], // 修正为正确的状态键名
  stateReconciler: autoMergeLevel2,
  // version: 1,
}

测试时的正确做法 #

如果需要在测试中使用preloadedState，直接在测试文件中调用setupStore(preloadedState)创建测试专用的store即可，完全不会影响生产环境的持久化逻辑——因为测试环境不会引入PersistGate和persistor。

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