Redux-persist 在重新加载时不与 expo 保持一致

Question

我正在使用以下技术堆栈

1. 反应原生
2. 世博会
3. redux
4. redux-persist。

我也在这里尝试过文章、文档和问题，但没有帮助。它根本不坚持。我正在使用模拟器并仅通过 expo 运行。一旦我关闭应用程序并重新加载 expo 客户端，它就不会持续存在并要求我再次登录。 我也尝试过使用 AsyncStorage，但仍然无法正常工作。

她是我的密码：

index.js

import thunk from "redux-thunk";
import AsyncStorage from "@react-native-community/async-storage";
import ExpoFileSystemStorage from "redux-persist-expo-filesystem"
// import storage from 'redux-persist/lib/storage';
import { createStore, applyMiddleware, compose } from "redux";
import { persistStore, persistReducer } from "redux-persist";

import rootReducer from "./reducers/rootReducer";
import logger from "redux-logger";

const persistConfig = {
  key: "root",
  storage: ExpoFileSystemStorage,
  whitelist: ["authReducer"],
};

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = createStore(
  persistedReducer,
  composeEnhancers(applyMiddleware(thunk, logger))
);

let persistor = persistStore(store);

export { store, persistor };

app.js

import React from "react";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import { AppLoading } from "expo";
import { useFonts } from "@use-expo/font";
import { NavigationContainer } from "@react-navigation/native";
import { ThemeProvider } from "react-native-elements";

import { theme } from "./constants/ThemeConfiguration";
import { store, persistor } from "./store";
import RootNavigator from "./navigators/RootNavigator";


export default (App) => {
  let [fontsLoaded] = useFonts({
    "Lato-Regular": require("./assets/fonts/Lato-Regular.ttf"),
  });

  if (!fontsLoaded) {
    return <AppLoading />;
  } else {
    return (
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          <ThemeProvider theme={theme}>
            <NavigationContainer>
              <RootNavigator />
            </NavigationContainer>
          </ThemeProvider>
        </PersistGate>
      </Provider>
    );
  }
};

rootReducer.js

import thunk from "redux-thunk";
import AsyncStorage from "@react-native-community/async-storage";
import { createStore, applyMiddleware, compose } from "redux";
import { persistStore, persistReducer } from "redux-persist";

import rootReducer from "./reducers/rootReducer";
import logger from "redux-logger";

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

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = createStore(
  persistedReducer,
  composeEnhancers(applyMiddleware(thunk, logger))
);

let persistor = persistStore(store);

export { store, persistor };

Answer 1

我把它修好了。它不在任何文档或文章中。 persistConfig 有问题。 Key，这里是 root。它应该是我们想要持久化的 reducer 的名称。就我而言，它是 auth。

更新后的persistConfig如下：

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