Невозможно проверить, загружено ли постоянное состояние в индексный/основной файл или нет, используя redux-persist в приложении для реагирования

Я использую redux и redux-persist для сохранения и сохранения состояния. В моем приложении мне нужно выбрать экран по умолчанию на основе сохраненного состояния в редуксе.

Например. Если пользователь уже вошел в систему, он не должен снова видеть экран входа в систему, когда открывает приложение. Мне нужно напрямую перейти к следующему экрану.

Но даже если я визуализирую свой компонент в PersistGate, я получаю начальное состояние, определенное в моем редюсере User, и пользователь всегда перенаправляется на экран входа в систему. На экране входа в систему я получаю постоянное состояние. Единственная проблема заключается в том, что я не нахожу способа получить постоянное состояние в файле 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 };

Как я могу решить эту проблему?


react-native android redux redux-persist
person rimmy    schedule 23.07.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

состояние загружается асинхронно, и вам нужно дождаться завершения. Для подобных ситуаций см. реквизиты 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>

ОБНОВЛЕНИЕ 2:

лучше используется состояние, переданное от 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>
    );
  }
}
person dvvtms    schedule 23.07.2018
comment
Разве PersistGate не ждет, пока состояние не будет получено? У меня сложилось впечатление, что это задерживает рендеринг пользовательского интерфейса вашего приложения до тех пор, пока ваше постоянное состояние не будет получено. Упоминается документ - github.com/rt2zz/redux-persist - person rimmy; 23.07.2018