黑名单Redux在react native中持续存在

Question

---

嗨，我对原生和redux的反应很陌生。我使用redux-persistent在本地存储数据，但有些键我不想持久化。为此，我使用黑名单，这是行不通的。它保留了所有的键，而不是忽略我想要的键。这是代码

我不想持久化数据和选项卡。

---

store.js

import rootReducer from './reducers'
// import AsyncStorage from '@react-native-community/async-storage';
import { AsyncStorage } from 'react-native';
import { persistStore, persistReducer } from 'redux-persist'
const persistConfig = {
key: 'root',
storage: AsyncStorage,
blacklist: ['data', 'tabbar'],
}
const persistedReducer = persistReducer(persistConfig, rootReducer)
let store = createStore(persistedReducer)
let persistor = persistStore(store)
export { store, persistor }.

减速器/product.js

const initialState = {
products: [],
favs: [],
data: [],
tabbar: false
}
const products = (state = initialState, action) => {
switch (action.type) {
case SET_PRODUCTS:
return {
...state,
products: action.products
}
case ADD_TO_FAV:
return {
...state,
favs: [...state.favs, action.product]
}
case REMOVE_FROM_FAV:
return {
...state,
favs: state.favs.slice().filter(f => f._id != action.product._id)
}
case SET_DATA:
return {
...state,
data: [...state.data, action.data]
}
case TABBAR:
return {
...state,
tabbar: action.tabbar
}
default:
return state;
}
}
export default products;

减速器/index.js

import prodReducer from './products';
export default combineReducers({
prodReducer
})  

Action/product.js

export const SET_PRODUCTS = 'SET_PRODUCTS';
export const ADD_TO_FAV = 'ADD_TO_FAV';
export const REMOVE_FROM_FAV = 'REMOVE_FROM_FAV';
export const SET_DATA = 'SET_DATA';
export const TABBAR = 'TABBAR';

export const setProducts = (products) => {
return {
type: SET_PRODUCTS,
products
};
}
export const addToFav = (product) => {
return {
type: ADD_TO_FAV,
product
};
}
export const removeFromFav = (product) => {
return {
type: REMOVE_FROM_FAV,
product
};
}
export const tabbar = (tabbar) => {
return {
type: TABBAR,
tabbar
};
}
export const setData = (data) => {
return {
type: SET_DATA,
data
};
}

app.js

import React, { useEffect } from 'react';
import Navigator from './navigation/Navigator'
import { Provider } from 'react-redux';
import { store, persistor } from './redux/store';
import { PersistGate } from 'redux-persist/integration/react'
import { firebase } from '@react-native-firebase/messaging'
import AsyncStorage from '@react-native-community/async-storage';

return (
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<StatusBar backgroundColor={'#AD1457'} />
<Navigator />
</PersistGate>
</Provider>
)
}

Answer 1

我觉得你的持久配置不错。你也能添加whitelist键吗？

const persistConfig = {
key: 'root',
storage: AsyncStorage,
blacklist: ['data', 'tabbar'],
whitelist:['products','favs']
}

Answer 2

仔细检查，持久化配置并不完全正确。为了使blacklist和whitelist工作，它们必须匹配应用持久配置的reducer的密钥——在本例中是rootReducer，它只有一个密钥——prodReducer。

除了root之外，您还需要配置产品reducer的持久性。文档调用此嵌套持久化。您可以在reducers/index.js:中执行此操作

import AsyncStorage from '@react-native-community/async-storage';
import { persistStore, persistReducer } from 'redux-persist'
import prodReducer from './products';
const productsPersistConfig = {
key: 'products',
storage: AsyncStorage,
blacklist: ['data', 'tabbar'],
}
export default combineReducers({
prodReducer: persistReducer(productsPersistConfig, prodReducer),
}) 

然后，您可以从主persistConfig中删除黑名单。

Answer 3

您是否尝试过完全删除应用程序，并在添加持久配置后重新安装？如果没有这些，以前保存的数据仍然存在。

Answer 4

我已经修复了这个问题

现在，我创建了两个减速器。一个是黑名单，一个是白人。然后组合

export default combineReducers({
whitelistReducer, blackListReducer
}) 

并在商店中创建一个persistConfig，在其中我给出了黑名单和白名单中受尊敬的reducer

const persistConfig = {
key: 'root',
storage: AsyncStorage,
whitelist: ['whitelistReducer'],
blacklist: ['blackListReducer']
}