Черный список Redux-persist в React Native

Привет, я новичок, чтобы реагировать на родной и сокращенный. Я использую redux persist для локального хранения данных, но есть некоторые ключи, которые я не хочу сохранять. Для этого я использую черный список, который не работает. Он сохраняет все ключи и не игнорирует ключи, которые я хочу. Вот код

Я не хочу сохранять данные и панель вкладок.

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
})

Действие / 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>
  )
}

react-native redux react-redux redux-persist redux-store
person Ahmed Saeed    schedule 13.04.2020    source источник

Ответы (4)


arrow_upward
0
arrow_downward

При ближайшем рассмотрении, постоянная конфигурация не совсем верна. Чтобы blacklist и whitelist работали, они должны соответствовать ключам редуктора, к которому вы применяете постоянную конфигурацию - в данном случае rootReducer, который имеет только один ключ - prodReducer.

Что вы хотите, так это настроить постоянство редуктора ваших продуктов специально в дополнение к root. В документах это называется вложенным персистами. Вы можете сделать это в своем 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.

person Marek Lisik    schedule 14.04.2020

arrow_upward
0
arrow_downward

Мне кажется, что ваша постоянная конфигурация подходит. Вы тоже можете добавить ключ whitelist?

const persistConfig = {
    key: 'root',
    storage: AsyncStorage,
    blacklist: ['data', 'tabbar'],
    whitelist:['products','favs']
}
person Ajin Kabeer    schedule 13.04.2020
comment
При использовании обоих данные не сохраняются в локальном хранилище. Я не знаю, в чем проблема. Теперь черный список работает, а белый - нет! - person Ahmed Saeed; 14.04.2020
comment
Можете ли вы попробовать импортировать import { PersistGate } from 'redux-persist/es/integration/react' вот так, удалить черный список и оставить белый список только для проверки его работы? - person Ajin Kabeer; 14.04.2020

arrow_upward
0
arrow_downward

Вы пробовали полностью удалить приложение и выполнить новую установку после добавления постоянной конфигурации? Без этого данные, сохраненные ранее, все еще существуют.

person Marek Lisik    schedule 13.04.2020

arrow_upward
0
arrow_downward

Я исправил эту проблему

Теперь я создал два редуктора. Один для черного списка и один для белого. Затем объедините это

export default combineReducers({
    whitelistReducer, blackListReducer
})

и в магазине создайте persistConfig, в котором я дал уважаемый редюсер в черный список и белый список

const persistConfig = {
    key: 'root',
    storage: AsyncStorage,
    whitelist: ['whitelistReducer'],
    blacklist: ['blackListReducer']
}
person Ahmed Saeed    schedule 14.04.2020