替换Redux状态后Action失效，Redux Toolkit快照加载问题咨询

我在使用Redux Toolkit时遇到这样的问题：想把Redux状态保存成快照文件，之后用replaceReducer加载这个状态。现在状态能成功加载，但加载后Action完全没法正常工作，请问问题出在哪？

相关代码 #

store.js #

import { configureStore, combineReducers } from '@reduxjs/toolkit';

import infoReducer from '../features/renderer/rendererSlice';
import cameraReducer from '../features/camera/cameraSlice';
import modalsreducer from '../features/modal/modalSlice';
import globalsReducer from '../features/global/globalsSlice';
import treeReducer from '../features/tree/treeSlice';
import modelReducer from '../features/model/modelSlice';
import eventReducer from '../features/event/eventSlice';

export const rootReducer = combineReducers({
  globals: globalsReducer,
  renderer: infoReducer,
  camera: cameraReducer,
  modal: modalsreducer,
  tree: treeReducer,
  model: modelReducer,
  event: eventReducer,
});

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: false }),
});

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

export default store;

snapModal.tsx #

const handleSaveSnapshot = (): void => {
    onClose(false);
    const state = store.getState();
    console.log(state)
    const stateJSON = JSON.stringify(state);
    const blob = new Blob([stateJSON], { type: 'application/json' });
    const timestamp = new Date().toISOString();
    const filename = `${timestamp}-tracer-snapshot.json`;
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = filename;
    link.click();
    URL.revokeObjectURL(url);
  };

  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
    const file = event.target.files?.[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (): void => {
        const stateJSON = reader.result as string;
        const newState = JSON.parse(stateJSON);
        store.replaceReducer(() => newState);
      };
      reader.readAsText(file);
    }
    event.target.value = '';
  };

问题原因与解决方案 #

问题核心 #

你现在的错误在于用replaceReducer时传入了一个直接返回固定状态的函数，而非能处理Action的合法reducer。

原本的rootReducer是由多个slice reducer组合而成的，它能接收Action并按逻辑更新状态。但替换成() => newState后，这个“假reducer”无论收到什么Action，都会直接返回你加载的固定状态——相当于所有Action都被忽略，自然无法更新状态。

方案一：直接通过Action重置状态（推荐） #

Redux的正确做法是通过dispatch Action来修改状态，而非直接替换reducer。我们可以创建一个专门的重置Action，在rootReducer中处理它：

1. 修改store.js，添加重置Action和处理逻辑：

import { configureStore, combineReducers, createAction } from '@reduxjs/toolkit';

// 创建重置状态的Action
export const resetState = createAction('reset/state');

// 包装原rootReducer，处理重置Action
const rootReducerWithReset = (state, action) => {
  if (resetState.match(action)) {
    return action.payload; // 直接返回快照状态
  }
  return rootReducer(state, action);
};

const store = configureStore({
  reducer: rootReducerWithReset,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: false }),
});

2. 修改snapModal.tsx，用dispatch重置状态而非替换reducer：

import { resetState } from './store';

// ...
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
  const file = event.target.files?.[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = (): void => {
      const stateJSON = reader.result as string;
      const newState = JSON.parse(stateJSON);
      store.dispatch(resetState(newState)); // 触发重置Action
    };
    reader.readAsText(file);
  }
  event.target.value = '';
};

方案二：若坚持使用replaceReducer #

如果一定要用replaceReducer，需保留原有的reducer逻辑，仅将初始状态设为快照状态：

import { rootReducer } from './store';

// ...
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
  const file = event.target.files?.[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = (): void => {
      const stateJSON = reader.result as string;
      const newState = JSON.parse(stateJSON);
      // 创建新的rootReducer，初始状态为快照状态
      const newRootReducer = (state = newState, action) => {
        return rootReducer(state, action);
      };
      store.replaceReducer(newRootReducer);
    };
    reader.readAsText(file);
  }
  event.target.value = '';
};

这样原有的slice reducer依然能处理Action，状态更新逻辑不会失效。

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