Redux-persist Ne persiste pas dans react-native avec thunk dans le middleware

Nov 19 2020

Je suis nouveau sur React-native et je travaille sur la création d'une application. L'application utilise redux pour gérer l'authentification de connexion.

Fichier réducteur -

import { combineReducers } from 'redux';

const initialAuthState = { isLoggedIn: false };
const Login = 'Login';
const Logout = 'Logout';
export const login = data => ({
  type: Login,
  data
});

export const logout = () => ({
  type: Logout,
});

function auth(state = initialAuthState, action) {
  switch (action.type) {
    case Login:
      console.log("reducer called for Login");
      console.log(action.data.user)
      return { ...state, isLoggedIn: true, user: action.data.user};
    case Logout:
      console.log("reducer called for logout");
      return { ...state, isLoggedIn: false, user: {} };
    default:
      return state;
  }
}

const AppReducer = combineReducers({
  auth,
});

export default AppReducer;

J'essaie de conserver l'état de connexion afin que l'utilisateur n'ait pas à se connecter à chaque fois que l'application est actualisée (fermée et ouverte) ou envoyée en arrière-plan. J'ai trouvé redux-persist en ligne et j'ai essayé de l'implémenter. Voici mon app.js

 import React from 'react';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import {persistStore, persistReducer} from 'redux-persist';
import AppReducer from './src/reducers';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { AppNavigator } from './src/navigations/AppNavigation';
import { enableScreens } from 'react-native-screens';
import {createLogger} from 'redux-logger';
import thunk from 'redux-thunk';
import { PersistGate } from 'redux-persist/integration/react';
import { composeWithDevTools } from 'redux-devtools-extension';


// Middleware: Redux Persist Config
const persistConfig = {
  // Root
  key: 'App',
  // Storage Method (React Native)
  storage: AsyncStorage,
  // Whitelist (Save Specific Reducers)
  whitelist: [
    'AppReducer',
  ],
  // Blacklist (Don't Save Specific Reducers)
  blacklist: [
  ],
};


const persistedReducer = persistReducer(persistConfig, AppReducer);

const store = createStore(persistedReducer, composeWithDevTools(applyMiddleware(thunk)));

const persistor = persistStore(store);


console.disableYellowBox = true;
//LogBox.ignoreAllLogs();

class App extends React.Component {
  render() {
    enableScreens();
    return (
      <Provider store={store}>
        <PersistGate persistor={persistor}>
        <AppNavigator />
        </PersistGate>
      </Provider>
    );
  }
}

//AppRegistry.registerComponent('App', () => App);

export default App;

Après le lancement de l'application, le flux fonctionne correctement, mais lorsque j'essaie de fermer l'application ou de l'actualiser, il me redirige vers la page de connexion elle-même, ce qui m'amène à la conclusion que redux-persist ne fait pas son travail.

Redux-persist Ne persiste pas dans react-native avec thunk dans le middleware

Réponses