我有一个具有以下结构的 Redux 存储:
{ui: {
drawer: false,
dialog: false
},
other_0: {
other_0_0: false,
other_0_1: 'and'
},
other_1: {
other_1_0: null,
other_1_1: true
}
}
我只想保留 key 抽屉。
到目前为止我的代码:
import { applyMiddleware, combineReducers, createStore } from "redux";
import thunk from "redux-thunk";
import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";
import logger from "redux-logger";
import other_0_reducer from "./other_0_reducer";
import other_1_reducer from "./other_1_reducer";
import ui_reducer from "./ui_reducer";
const rootReducer = combineReducers({
other_0: other_0_reducer,
other_1: other_1_reducer,
ui: ui_reducer,
});
const pConfig = {
key: "root",
storage: storage,
whitelist: ["ui"]
};
const pReducer = persistReducer(pConfig, rootReducer);
const store = createStore(pReducer, applyMiddleware(thunk, logger));
let persistor = persistStore(store);
export { store, persistor };
这使父键“ui”保持事件状态,但实际上我想将子“dialog”列入黑名单。
它基本上是一个嵌套的持久化器:我查看了 StackOverflow 上的其他文章,但我无法使其工作。有人能帮助我吗?谢谢!
最佳答案
您可以单独保留每个 reducer 。
import { applyMiddleware, combineReducers, createStore } from "redux";
import thunk from "redux-thunk";
import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";
import logger from "redux-logger";
import other_0_reducer from "./other_0_reducer";
import other_1_reducer from "./other_1_reducer";
import ui_reducer from "./ui_reducer";
const uiPersistConfig = {
key: "ui",
storage: storage,
whitelist: ["drawer"]
}
const rootReducer = combineReducers({
other_0: other_0_reducer,
other_1: other_1_reducer,
ui: persistReducer(uiPersistConfig, ui_reducer)
});
const pConfig = {
key: "root",
storage: storage,
whitelist: []
};
const pReducer = persistReducer(pConfig, rootReducer);
const store = createStore(pReducer, applyMiddleware(thunk, logger));
let persistor = persistStore(store);
export { store, persistor };
希望这有帮助。
关于javascript - 嵌套 Redux 持久化器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60597198/