无法使用react-native app中的redux-persist检查索引/主文件上是否已加载持久状态

Posted 2021-05-05

我使用redux和redux-persist来保存并保持状态。在我的应用程序中，我需要根据redux中保存的状态来决定默认屏幕。

例如 - 如果用户已经登录，则他在打开应用程序时不应再次看到登录屏幕。我需要直接跳到下一个屏幕。

但即使我在PersistGate中渲染我的组件，我也会在我的User reducer中定义初始状态，并且用户总是被重定向到登录屏幕。在登录屏幕上，我得到了持久状态。唯一的问题是我没有找到任何方法来获取index.js文件中的持久化状态。

这是我的index.js文件，我在其中添加了一个警告语句，其中我得到的是初始状态而不是持久化状态 -

import React, { Component } from "react";
import { Provider } from "react-redux";
import { StyleProvider } from "native-base";
import reduxStore from "./setup/Store";
import { PersistGate } from "redux-persist/integration/react";
import Navigator from "./setup/Routes";
import SplashScreen from "react-native-splash-screen";
import Walkthrough from "./screens/Walkthrough/Walkthrough";

export default class Main extends Component {
  componentWillMount() {
    SplashScreen.hide();
  }

  render() {
    const Login = Navigator("CustomerLogin");
    const Profile = Navigator("Profile");
    const Home = Navigator("CustomerHome");
    return (
      <Provider store={reduxStore.store}>
        <PersistGate persistor={reduxStore.persistor}>
          {alert(JSON.stringify(reduxStore.store.getState().User))}
          {reduxStore.store.getState().User.is_logged_in &&
          !reduxStore.store.getState().User.is_registered ? (
            <Profile />
          ) : reduxStore.store.getState().User.is_registered ? (
            <Home />
          ) : reduxStore.store.getState().User.walkthrough_visible ? (
            <Walkthrough navigation={Login} />
          ) : (
            <Login />
          )}
        </PersistGate>
      </Provider>
    );
  }
}

这是我的Store.js文件 -

import { createStore, applyMiddleware, compose } from "redux";
import storage from "redux-persist/lib/storage"; // defaults to localStorage for web and AsyncStorage for react-native
import Reducers from "./Reducer";
import createSagaMiddleware from "redux-saga";
import rootSaga from "./Sagas";
import { persistStore, persistReducer } from "redux-persist";

const sagaMiddleware = createSagaMiddleware();
const middleWare = [sagaMiddleware];

const persistConfig = {
  key: "root",
  storage
};

const persistedReducer = persistReducer(persistConfig, Reducers);

// Add the autoRehydrate middleware to your redux store
const store = createStore(
  persistedReducer,
  compose(applyMiddleware(...middleWare))
);

sagaMiddleware.run(rootSaga);

let persistor = persistStore(store);

// Enable persistence
export default { store, persistor };

我该如何解决这个问题？

答案

state被加载异步，你需要等到完成。对于类似的情况，请参阅PersistGate loading或onBeforeLift道具

https://github.com/rt2zz/redux-persist/blob/master/docs/PersistGate.md

<PersistGate
  loading={<CircularIndicator message={"loading"} />}
  onBeforeLift={onBeforeLift}
  persistor={persistor}
>
<Router />
</PersistGate>

UPDATE2：

更好的是使用状态，从PersistGate传下来的东西。您可以创建连接的分支组件：

        const Branch=({User})=><View>{
          !User.is_registered ? (
          <Profile />
          ) : User.is_registered ? (
          <Home />
          ) : User.walkthrough_visible ? (
          <Walkthrough navigation={Login} />
          ) : (
          <Login />
        )}</View>

    const mapStateToProps = (state) => {
      return {
        User: state.User/// get user
      }
    }

    const BranchWithUser = connect(
      mapStateToProps,
    )(Branch)



export default class Main extends Component {
  componentWillMount() {
    SplashScreen.hide();
  }

  render() {
    const Login = Navigator("CustomerLogin");
    const Profile = Navigator("Profile");
    const Home = Navigator("CustomerHome");
    return (
      <Provider store={reduxStore.store}>
        <PersistGate
          loading={<CircularIndicator message={"loading"} />}
          onBeforeLift={onBeforeLift}
          persistor={persistor}
        >
        <BranchWithUser />
        </PersistGate>
      </Provider>
    );
  }
}