redux-persist 黑名单被忽略

Question

我已经仔细查看了我能找到的内容，但据我所知，我做的事情是正确的。

我的 configStore.js 看起来像这样：

import diaryReducer from '../reducers/diaryReducer';
[..]
const diaryPersistConfig = {
    key: 'diary',
    storage: storage,
    keyPrefix: '',
    blacklist: ['loading', 'uploadModalVisible', 'monthModalVisible', 'editModalVisible', 'entryUploading', 'deleteEntryDisabled']
};
[..]
const persistedReducer = persistReducer(persistConfig, combineReducers({
    auth: persistReducer(authPersistConfig, authReducer),
    diary: persistReducer(diaryPersistConfig, diaryReducer)
}));

我的 diaryreducer.js 看起来像这样：

const diaryDefaultState = {
    loading: false,
    uploadModalVisible: false,
    monthModalVisible: false,
    editModalVisible: false,
    entryUploading: false,
    deleteEntryDisabled: false,
    entries: []
};

export default (state = diaryDefaultState, action) => {

switch (action.type) {

    case 'ENTRIES_LOADING':
        return {
            ...state,
            loading: true
        };
    [..others, don't think these are important for storage, just use during run?..]

而 Diary.js 看起来像这样：

//in render()
<Modal
                        animationType="slide"
                        onRequestClose={this.onCloseModal}
                        transparent={false}
                        visible={this.props.uploadModalVisible}
                    >
[....]
const mapStateToProps = (state) => {

return {
    user: state.auth.user,
    loading: state.diary.loading,
    uploadModalVisible: state.diary.uploadModalVisible,
    monthModalVisible: state.diary.monthModalVisible,
    editModalVisible: state.diary.editModalVisible,
    entryUploading: state.diary.entryUploading,
    deleteEntryDisabled: state.diary.deleteEntryDisabled,
    entries: state.diary.entries
};

};

uploadModalVisible 被保留，所以当我在应用程序打开时离开它时，该值仍然为真，并且在我 return 重新启动应用程序后转到该页面时它是可见的。

据我所知，我正确使用了黑名单，但它对我不起作用。谁能看出我做错了什么？

Answer 1

我在项目中遇到了同样的问题。使用 redux-persist 的黑名单和白名单时有一个问题，因为它们的行为有点奇怪。

在您的代码中，您的 diaryPersistConfig 设置正确，但您没有包含 persistConfig 对象。我怀疑问题出在那个配置上，这是超级不直观的。

你必须添加一个blacklist标签到合并的reducer persist配置中，否则较低级别（diaryPersistConfig）的黑名单将被忽略。

下面的代码应该可以帮助您理解我的意思：

const diaryPersistConfig = {
    key: 'diary',
    storage: storage,
    keyPrefix: '',
    blacklist: ['loading', 'uploadModalVisible', 'monthModalVisible', 'editModalVisible', 'entryUploading', 'deleteEntryDisabled']
};

const persistConfig = {
    key: 'root',
    storage: AsyncStorage,
    blacklist: ['diary'],
};

const persistedReducer = persistReducer(persistConfig, combineReducers({
    auth: persistReducer(authPersistConfig, authReducer),
    diary: persistReducer(diaryPersistConfig, diaryReducer)
}));

有关官方示例，请查看 Redux Persist 的 Nested Persist 自述文件部分。

redux-persist 黑名单被忽略

redux-persist blacklist being ignored

react-native

redux-persist