我在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 = '';
};
1条答案
按热度按时间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
重新初始化存储。另一种方法是搜索提供基于文件的状态加载的中间件。