Question

我正在使用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 };

如何解决此问题？

Answer 1

状态已异步加载，您需要等到完成。对于类似情况，请参见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>
    );
  }
}

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

1 个答案: