如何为嵌套状态制作 redux-persist 黑名单？

Question

这是我的 persistConfig 和 store 的代码，我想为 tracking 添加 blacklist，但不是针对所有跟踪状态，而只是针对 tracking.checkingOut、tracking.checkingIn 和 tracking.searching，如何正确执行此操作？我知道如果我想完全删除跟踪，我需要在 persistConfig 中写入 blacklist: ['tracking']，但我不确定在嵌套状态的情况下该怎么做。

const persistConfig = {
    key: 'root',
    storage: AsyncStorage,
  }

const persistedReducer = persistReducer(persistConfig, reducers)

const createStoreWithMiddleware = applyMiddleware(thunkMiddleware)(createStore);

export const store = createStoreWithMiddleware(persistedReducer);

export const persistor = persistStore(store);

如果我像这样添加黑名单： blacklist: ['tracking.checkingOut', 'tracking.checkingIn', 'tracking.searching'] 可以吗？或者对此应该有不同的方法？

Answer 1

您可以在 reducer 树的更深处使用 persistReducer：

combineReducers({
  location,
  i18n,
  tracking: persistReducer({ key: 'tracking', storage: AsyncStorage, blacklist: ['whateverYouWantTo'] }),
})

redux-persist-https://github.com/rt2zz/redux-persist#nested-persists

的官方文档中有一个例子

Answer 2

如果我们使用@KacperWiszczuk 的回答，我不知道是否可以对整个州应用完全受控的迁移，因此我的变体是：

如果您想为州的任何部分制作黑名单，您可以从 'redux-persist'[= 应用 createTransform 13=]

示例：

import AsyncStorage from '@react-native-community/async-storage'
import { combineReducers } from 'redux'
import { persistReducer, createTransform } from 'redux-persist'

import localeReducer from './localeReducer' //reducer
import passengerReducers from './passenger' //a set of reducers created via combineReducers

import migrations from './migrations'

const passengerBlacklist = createTransform(
  null,
  (state, key) => {
    {/* Put the code for the initial data here.
        It means when the app will be reopened next 
        data will be cleared/filled up.
    */}
    {/* If you want to not clear but remove the keys, 
        you can use for example omit from 'lodash/omit' here, 
        or any tools what you want
    */}
    const newState = {...state}
    newState.order.from = '' 
    newState.order.to = ''
    return newState
  },
 { whitelist: ['passenger'] }
)

const rootConfig = {
  key: '_store_',
  version: 0,
  storage: AsyncStorage,
  blacklist: [],
  transforms: [passengerBlacklist],
  migrate: migrations,
}

const rootReducer = combineReducers({
  locale: localeReducer,
  passenger: passengerReducers,
})

export default persistReducer(rootConfig, rootReducer)

其中 passengerReducers 是

import { combineReducers } from 'redux'

import orderReducer from './orderReducer'

export default combineReducers({
  order: orderReducer,
})

这是整个州的样子

Answer 3

我最近发布了an open-source package called Redux Deep Persist, which directly resolves this problem. You can avoid nested redux persist configs, presented in 。这种创建配置的新方法更加简单，并为您提供更多可能性。

if I will add blacklist like this: blacklist: ['tracking.checkingOut', 'tracking.checkingIn', 'tracking.searching'] will it work?

是的，['tracking.checkingIn','tracking.checkingOut'] 这样的符号可以通过 getPersistConfig 方法实现。

这是使用我的“Redux Deep Persist”包的新配置：

import { getPersistConfig } from 'redux-deep-persist';

const config = getPersistConfig({
    key: 'root',
    storage: AsyncStorage,
    blacklist: [
        'tracking.checkingIn',  
        'tracking.checkingOut',  
        'tracking.searching.no.matter.how.deep.you.go'
    ],
    rootReducer, // your root reducer must be also passed here
    ... // any other props from the original redux-persist config omitting the stateReconciler
})

您可以在 redux-deep-persist 的官方文档中阅读更多内容 https://github.com/PiotrKujawa/redux-deep-persist/blob/master/README.md

如何为嵌套状态制作 redux-persist 黑名单？

How to make redux-persist blacklist for nested state?

reactjs

react-native

redux-persist