Redux-persist Nie trwa w natywnym reagowaniu z thunk w oprogramowaniu pośrednim

Nov 19 2020

Jestem nowy w React-Native i pracuję nad budowaniem aplikacji. Aplikacja wykorzystuje redux do zarządzania uwierzytelnianiem logowania.

Plik reduktora -

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;

Próbuję zachować stan logowania, aby użytkownik nie musiał się logować za każdym razem, gdy aplikacja jest odświeżana (zamykana i otwierana) lub wysyłana w tle. Znalazłem Redux-persist w Internecie i próbowałem wdrożyć to samo. Oto moja aplikacja.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;

Po uruchomieniu aplikacji przepływ działa poprawnie, ale kiedy próbuję zamknąć aplikację lub ją odświeżyć, przekierowuje mnie do samej strony logowania, co prowadzi mnie do wniosku, że redux-persistent nie wykonuje swojej pracy.

Redux-persist Nie trwa w natywnym reagowaniu z thunk w oprogramowaniu pośrednim

Odpowiedzi