替换redux状态后,action不再起作用

kt06eoxx  于 2023-06-06  发布在  其他
关注(0)|答案(1)|浏览(180)

我在redux-toolkit中遇到了问题。我尝试做的是将redux的状态保存为快照文件,并在稍后使用replaceReducer函数加载此状态。
目前我的状态得到加载,但我有一个问题的行动。加载新状态后,它们不再工作,这是什么问题?
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 = '';
  };
wtzytmuj

wtzytmuj1#

store.replaceReducer很可能是错误的方法。It's documented as a way to do code-splitting,因为它取代了根reducer,而你想从json文件加载状态到现有的reducer中,如果我理解正确的话。
我会查看https://redux-toolkit.js.org/api/configureStore#preloadedstate并创建一个函数,该函数可以用preloadedState重新初始化存储。另一种方法是搜索提供基于文件的状态加载的中间件。

相关问题