Redux-persist 미들웨어의 썽크와 반응 네이티브에서 지속되지 않음

Nov 19 2020

저는 react-native를 처음 접했고 응용 프로그램을 구축하는 중입니다. 응용 프로그램은 로그인 인증을 관리하기 위해 redux를 사용하고 있습니다.

감속기 파일-

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;

사용자가 앱을 새로 고치거나 (닫고 열 때) 백그라운드로 보낼 때마다 로그인 할 필요가 없도록 로그인 상태를 유지하려고합니다. 온라인에서 redux-persist를 발견하고 동일한 구현을 시도했습니다. 여기 내 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;

응용 프로그램을 시작한 후 흐름이 제대로 작동하지만 앱을 닫거나 새로 고치려고하면 로그인 페이지 자체로 리디렉션되어 redux-persist가 제대로 작동하지 않는다는 결론을 내립니다.

Redux-persist 미들웨어의 썽크와 반응 네이티브에서 지속되지 않음

답변