如何正确使用redux-persist-transform-filter仅持久化galleryReducer中的failedUploads状态

我来帮你搞定这个问题，用redux-persist-transform-filter的createFilter其实几步就能实现只持久化你需要的failedUploads字段，不用再整个持久化galleryReducer了。下面是具体的步骤和修改后的代码：

1. 先安装依赖（如果还没装的话） #

如果你还没安装redux-persist-transform-filter，先执行这个命令：

npm install redux-persist-transform-filter
# 或者用yarn
yarn add redux-persist-transform-filter

2. 修改App.js中的配置 #

首先引入createFilter，然后创建一个过滤器来指定只保留galleryReducer里的failedUploads字段，最后把这个过滤器加到persistConfig的transforms数组里。修改后的完整代码如下：

import signupReducer from './src/store/signup-auth/reducer'
import cameraReducer from './src/store/camera/reducer'
import galleryReducer from './src/store/event/reducer'
// 引入createFilter
import { createFilter } from 'redux-persist-transform-filter';

// 创建过滤器：第一个参数是reducer的名称，第二个是要保留的字段数组
const galleryFilter = createFilter('galleryReducer', ['failedUploads']);

const persistConfig = { 
 key: 'root', 
 storage: AsyncStorage, 
 whitelist: ['galleryReducer'], // 仍然需要把galleryReducer加入白名单，但会被过滤器处理
 transforms: [galleryFilter], // 加入自定义的过滤器
}

const rootReducer = combineReducers({ 
 signupReducer: signupReducer, 
 cameraReducer: cameraReducer, 
 galleryReducer: galleryReducer, 
})

const persistedReducer = persistReducer(persistConfig, rootReducer)
const store = createStore(persistedReducer, applyMiddleware(ReduxThunk))
const persistor = persistStore(store)

return ( 
 <Provider store={store}>
 <PersistGate loading={<LoadingViewWithoutInsets />} persistor={persistor} >
 <AppNavigator />
 </PersistGate>
 </Provider>
 )

关键说明 #

• createFilter('galleryReducer', ['failedUploads'])：这个过滤器会告诉redux-persist，在持久化galleryReducer的时候，只保留其中的failedUploads字段，其他的比如galleries等字段都不会被存在本地存储里。
• 你原来的whitelist配置依然保留galleryReducer，因为我们需要指定这个reducer是要被持久化的，只是通过过滤器来筛选里面的具体字段。

这样配置之后，就只有galleryReducer里的failedUploads数组会被持久化啦，完全符合你的需求。

内容的提问来源于stack exchange，提问作者haibert