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

知识为进步之母,而进步又为富强之源泉。这篇文章主要讲述无法使用react-native app中的redux-persist检查索引/主文件上是否已加载持久状态相关的知识,希望能为你提供帮助。
我使用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 loadingonBeforeLift道具
https://github.com/rt2zz/redux-persist/blob/master/docs/PersistGate.md
< PersistGate loading={< CircularIndicator message={"loading"} /> } onBeforeLift={onBeforeLift} persistor={persistor} > < Router /> < /PersistGate>

UPDATE2:
【无法使用react-native app中的redux-persist检查索引/主文件上是否已加载持久状态】更好的是使用状态,从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> ); } }


    推荐阅读