React Redux-Toolkit中redux-state-sync初始化状态未同步问题

核心原因 #

你遇到的问题是初始状态同步完成后，React组件未捕获到状态更新。虽然receiveIniteState触发并更新了Redux store，但此时React组件已经完成第一次渲染，由于初始化时机的问题，组件的订阅逻辑没有接收到这次初始状态变更。

Angular的变更检测机制与React不同，能自动捕获这类异步状态更新；但React中，组件初始渲染依赖挂载时的store状态，若初始状态同步在组件挂载后异步完成，需要确保组件能响应这次状态变化。

具体解决方案 #

1. 调整initStateWithPrevTab的执行时机 #

将initStateWithPrevTab的调用延迟到React应用挂载完成后，确保组件已经订阅了store的状态变化：

修改index.ts：

import { createRoot } from 'react-dom/client';
import { StrictMode } from 'react';
import { App } from './App';
import { store } from './store';
import { initStateWithPrevTab } from 'redux-state-sync';

const root = createRoot(document.getElementById('app')!);
root.render(
  <StrictMode>
    <App name="StackBlitz" />
  </StrictMode>
);

// 应用挂载完成后再初始化状态同步
setTimeout(() => {
  initStateWithPrevTab(store);
}, 0);

2. 简化Properties组件的状态逻辑 #

你的Properties组件中用useState包裹渲染内容是多余的，直接使用useSelector返回的值即可，避免因额外状态层导致的更新延迟：

修改Properties.tsx：

import { useSelector } from 'react-redux';
import { selectPropertiesId } from './AppProperties.slice';

export function Properties() {
  const propertiesId = useSelector(selectPropertiesId);
  return <div>PropertiesId : {propertiesId}</div>;
}

3. 确保状态同步中间件配置正确 #

验证createStateSyncMiddleware的配置，确保包含初始化状态相关的action类型：

修改store.ts：

import { configureStore } from '@reduxjs/toolkit';
import appPropertiesReducer from './AppProperties.slice';
import { createStateSyncMiddleware } from 'redux-state-sync';

export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof store.getState>;

export const store = configureStore({
  reducer: {
    appProperties: appPropertiesReducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(
      createStateSyncMiddleware({
        // 显式指定需要同步的action类型
        whitelist: ['SET_INITIAL_STATE', 'app-properties/setPropertiesId'],
      })
    ),
});

为什么之前的代码不生效？ #

• initStateWithPrevTab在store创建后立即执行，此时React组件尚未挂载，store的状态更新无法被组件的useSelector捕获，组件会使用初始的0值完成第一次渲染。
• 后续状态变更能正常同步，是因为此时组件已经挂载并订阅了store，任何action触发的状态变化都会触发组件重新渲染。

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