React native + redux-persist:如何忽略键(黑名单)?
Posted
技术标签:
【中文标题】React native + redux-persist:如何忽略键(黑名单)?【英文标题】:React native + redux-persist: how to ignore keys (blacklist)? 【发布时间】:2017-05-03 00:34:28 【问题描述】:我使用redux-persist
存储我的设置,并希望忽略其中一些设置,以便在每次重启时重置它们,例如崩溃后。
可以将reducer-names 数组添加为blacklist
或whitelist
,但我想忽略特定键,例如settings.isLoggedIn
而不是 settings
。
// ...
function configureStore(initialState)
const store = createStore(
RootReducer,
initialState,
enhancer
);
persistStore(store,
storage: AsyncStorage,
blacklist: ['router', 'settings'] // works, 'settings.isLoggedIn' doesn't.
, () =>
// restored
);
return store;
// ...
我必须创建另一个减速器还是有人可以解决这个问题?
提前致谢!
【问题讨论】:
【参考方案1】:您必须为要保存的每个道具创建减速器。
【讨论】:
【参考方案2】:根据documentation,黑名单参数包含:'keys (read: reducers) to ignore',所以恐怕无法实现你想要的行为。您可以尝试自己实现该功能,但我认为该包的代码库实际上专注于将 reducer 列入黑名单而不是属性(请参阅this)。恐怕唯一的解决方案是为您的非持久键创建一个单独的减速器(根据我的经验,这并不麻烦)。
【讨论】:
【参考方案3】:使用转换来保存单独的字段,例如 username
in redux-form MyForm
inside state.form.MyForm
:
const formName = `MyForm`
const formTransform = createTransform(
(inboundState, key) =>
return
...inboundState,
[formName]:
values:
username: _.get(inboundState, `$ MyForm .values.username`)
,
(outboundState, key) =>
return outboundState
,
whitelist: [`form`]
)
persistStore(store,
whitelist: [
`form`
],
transforms: [
formTransform
]
)
【讨论】:
【参考方案4】:一个简单的解决方案是将整个reducer 保存在白名单中,然后使用“persist/REHYDRATE”操作将整个reducer 保存在reducer 中,以仅过滤您想要保留的键。
例子:
// configureStore.js
const persistConfig =
keyPrefix: 'webapp',
whitelist: ['filters'],
// filtersReducer.js
const projectsBase =
[KEYS.SORT]: PROJECTS_SORT_TYPE.NAME,
[KEYS.TEXT]: '',
const itemsBase =
[KEYS.SORT]: ITEMS_SORT_TYPE.INDEX,
[KEYS.TEXT]: '',
const base =
[KEYS.PROJECTS]: projectsBase,
[KEYS.ITEMS]: itemsBase
export const filters = (state = base, action) =>
const type = action
switch (type)
case PERSIST_REHYDRATE_ACTION_TYPE:
if (action.payload.filters)
const filters = action.payload.filters
const projectsSort = _.get(filters, [KEYS.PROJECTS, KEYS.SORT])
const itemsSort = _.get(filters, [KEYS.ITEMS, KEYS.SORT])
const newBase = ...base,
[KEYS.PROJECTS]:
[KEYS.SORT]: projectsSort
,
[KEYS.ITEMS]:
[KEYS.SORT]: itemsSort
state = newBase
break
default:
break
return state
【讨论】:
【参考方案5】:您可以为此使用 Nested Persists。
import persistStore, persistReducer from 'redux-persist';
const rootPersistConfig =
key: 'root',
storage: storage,
blacklist: ['auth']
// here you can tell redux persist to ignore loginFormData from auth reducer
const authPersistConfig =
key: 'auth',
storage: storage,
blacklist: ['loginFormData']
// this is your global config
const rootReducer = combineReducers(
auth: persistReducer(authPersistConfig, authReducer),
other: otherReducer,
)
// note: for this to work, your authReducer must be inside blacklist of
// rootPersistConfig
const myReducerConfig =
key: "cp",
storage: storage,
blacklist: ["authReducer"],
debug: true
;
【讨论】:
【参考方案6】:正如@martinarroyo 提到的那样创建一个单独的reducer,这是一个不错的选择,如果我们遵循它并为错误创建一个单独的reducer,我们可以简单地返回一个空状态作为默认值;
const initialState =
error: null
export default errorReducer = (state = initialState, action) =>
switch (action.type)
...
default:
return
...state,
error: null
这将在我们每次访问该站点时清除状态,因为默认将错误设置为 null。
【讨论】:
以上是关于React native + redux-persist:如何忽略键(黑名单)?的主要内容,如果未能解决你的问题,请参考以下文章
react native 增加react-native-camera
更新 react-native-maps 以使用 create-react-native-app
react native 增加react-native-storage
React-Native 和 Expo:create-react-native-app 和 react-native init 之间的区别
什么是 react-native-cli 和 @react-native-community/cli?
React Native - 当 react-native 版本 > 0.55 时,无法通过 react-native-cli 创建新项目