Потеряно значение объекта состояния Redux при обновлении или перезапуске приложения

Question

Я использую redux-persist для сохранения значений моего состояния, но когда я обновляю свое приложение или закрываюсь и снова открываюсь, я получаю исходное состояние. работать должным образом до тех пор, пока я не обновлю приложение.

Вот так я настраиваю свой магазин

import { createStore, applyMiddleware, compose } from 'redux'

import axios from 'axios';
import thunk from 'redux-thunk';
import reducers from '../Stores/Reducers'
import { persistStore, persistReducer } from 'redux-persist';
import { AsyncStorage } from 'react-native';
import handleError from './handleError';
import { Config } from 'App/Config/index.production'

const persistConfig = {
  key: "root",
  storage: AsyncStorage
};


/**-------------------Initiate axios instance--------------------------- **/

const configureAxios = () => {

  return axios.create({
    baseURL: `${Config.API_URL}`,
    timeout: 20000,
    withCredentials: false,
    headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
  });

};


/**------------------configure redux persist----------------------------**/

const configurePersistStore = () => {

  const persistedReducer = persistReducer(persistConfig, reducers);

  return persistedReducer;
};


export const axiosInstance = configureAxios();


/**-------------------Axios response Intercepertor--------------------------- **/

axiosInstance.interceptors.response.use(response => {

  return response.data

}, error => {

  const errors = handleError(error);
  return Promise.reject(errors);
})


/**-------------------Added Middleware for actions----------------------- **/

const configureMiddlewares = () => {

  const middleware = [
    thunk.withExtraArgument({
      api: axiosInstance,
    })
  ];

  return middleware;
};

/**-------------------Create Store-------------------------------------- **/

const configureStore = () => {
  const middlewares = configureMiddlewares();
  const reducers = configurePersistStore();

  let store = createStore(reducers, compose(applyMiddleware(...middlewares)));
  const persistor = persistStore(store);
  return { store, persistor };
}

export default configureStore

и ниже мой корневой экран кода

import React, { Component } from 'react'
import { Provider } from 'react-redux'
import { PersistGate } from 'redux-persist/integration/react'
import configureStore from './Stores/CreateStore'
import RootScreen from './Containers/Root/RootScreen'
import SplashScreen from "App/Containers/SplashScreen/SplashScreen";


const persistantStore = configureStore();
const { store, persistor } = persistantStore;

const _XHR = GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;
XMLHttpRequest = _XHR
export default class App extends Component {
  render() {
    console.disableYellowBox = true;
    return (

      <Provider store={store}>

        <PersistGate loading={null} persistor={persistor}>
          <RootScreen />
        </PersistGate>
      </Provider>
    )
  }
}

пожалуйста, можетеВы помогаете мне сообщить, что я делаю неправильно? я не могу понять, что я делаю неправильно.

Answer 1

Вы можете вручную определять клавиши белого (или черного) списка и преобразовывать фильтры. Это должно решить вашу проблему.

Например:

// keys for persist in "app" reducer:
const appWhiteListFilter = createFilter('app', [
    'language',
    'theme'
]);

const persistConfig = {
  key: "root",
  storage: AsyncStorage,
  whitelist: ["app"],
  transforms: [appWhiteListFilter]
};