redux-persistent-如何将黑名单/白名单嵌套状态

Question

所以我有一个凭证对象，它包含一个密码和一个用户名

payload: Object
credentials: Object
password: ""
username: ""

我想在reducer配置中把密码列入黑名单，比如

const authPersistConfig = {
key: 'AuthReducer',
storage: storage,
blacklist: ['credentials.password']
};

如果我使用这个代码，两个凭证状态最终都会被列入黑名单。我想保留用户名，但不想保留密码。

可能是redux-persistent只保持顶级状态，也可能是语法错误，或者完全是其他原因——有什么想法吗？

非常感谢

Answer 1

您可以使用名为redux-persist-transform-filter的NPM包，如redux-persist问题#277中所述-仅限白名单缩减器子属性？

Answer 2

或者，如果您不想完全删除键，只想清除任何嵌套状态对象中的任何数据，下面是使用'redux-persistent'中的createTransform的示例

如何使redux持久化嵌套状态的黑名单？

Answer 3

您可以执行嵌套的持久配置。

const rootPersistConfig: any = {
key: "root",
timeout: 500,
storage: AsyncStorage,
blacklist: ["credentials"],
};

const credentialsPersistConfig: any = {
key: "credentials",
storage: AsyncStorage,
whitelist: ["username"],
};

const rootReducer = combineReducers({
credentials: persistReducer(credentialsPersistConfig, CredentialReducer),
});

const persistedReducer = persistReducer(rootPersistConfig, rootReducer);

Answer 4

而不是像这样的持久根密钥：

const rootPersistConfig = {
key: 'root',
storage,
}

我们可以使用不同的减速器键：

const userPersistConfig = {
key: 'userReducer',
storage,
whitelist: ['user', 'isLoading']
}
const cartPersistConfig = {
key: 'cart',
storage
}
const rootReducer = combineReducers({
cart: persistReducer(cartPersistConfig, cart),
filter,
userReducer: persistReducer(userPersistConfig, userReducer),
wishlist,

})

store.js文件：

const store = configureStore({
reducer: rootReducer,
middleware: (getDefaultMiddleware) => {
return getDefaultMiddleware({
serializableCheck: false,
}).concat(apiSlice.middleware);
},
});
const persistor = persistStore(store);

Answer 5

您可以使用pick或省略将特定一级存储条目的任何嵌套值列入白名单或黑名单。这里有一个例子：

let blacklistTransform = createTransform((inboundState, key) => {
if (key === 'credentials') {
return omit(inboundState, ['password']);
} else {
return inboundState;
}
});
const persistConfig = {
key: 'root',
storage: AsyncStorage,
blacklist: ['credentials'], // Avoid credentials entry
transforms: [blacklistTransform],
};

白名单示例：

// Just persist dropdown default values
const whitelistTransform = createTransform((inboundState, key) => {
// Select values from the route reducer
if (key === 'route') {
return pick(inboundState, [
'lastSelectedSchoolYear , lastSelectedSite',
'lastSelectedState',
]);
}
return inboundState;
});
const persistConfig = {
key: 'root',
storage,
transforms: [whitelistTransform],
};

Answer 6

我最近发布了一个名为Redux Deep Persist的开源软件包，无论它有多深，它都可以非常有助于为嵌套状态创建Redux Persist配置。它可以在这种特定情况下为您提供帮助。

只有当使用getPersistConfig方法时，才允许使用此表示法blacklist: ['credentials.password']。

以下是您的配置：

import { getPersistConfig } from 'redux-deep-persist';
import storage from "redux-persist/es/storage/session";
const config = getPersistConfig({
key: 'root',
storage,
blacklist: [
'credentials.password',
],
rootReducer, // your root reducer must be also passed here
... // any other props from the original redux-persist config omitting the stateReconciler
})

您可以在redux深度持久化的官方文档中阅读更多信息https://github.com/PiotrKujawa/redux-deep-persist/blob/master/README.md