知识为进步之母,而进步又为富强之源泉。这篇文章主要讲述无法使用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
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:
【无法使用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>
);
}
}
推荐阅读
- Android SQLite用户登录不起作用
- 将外部JAR添加到Android AOSP构建时出错
- Android自定义下拉菜单/弹出菜单
- 如何将我们的应用程序重新上传到appstore
- 成功部署后,在/ var / app / current目录中创建文件
- Flutter(用于部署的Android版本)
- 部署ADF应用程序时未解析的Webapp库引用
- 有没有办法使用Android Studio部署Libgdx桌面应用程序(基于IntelliJ Idea的IDE)
- 如何使用JavaScript正确地按字母顺序对带有特殊字符的字符串数组进行排序