Redux-persist 在中间件中使用 thunk 不坚持 react-native

Question

我是 react-native 的新手，我正在构建一个应用程序。应用程序正在使用 redux 来管理登录身份验证。

Reducer 文件 -

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 没有完成它的工作。

谁能建议我在这里做错了什么。

谢谢

Answer 1

您将 AppReducer 列入白名单，但您的身份验证缩减程序名为 auth。

尝试将auth 添加到您的 whitleList 中，看看它是否有效