android - 无法在 react-native 应用程序中使用 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 };
我该如何解决这个问题?
解决方案
状态是异步加载的,您需要等到完成。对于类似的情况,请参阅 PersistGateloading
或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>
);
}
}
推荐阅读
- python - 我将如何计算每个类别 BMI 计算器中的人数
- java - 反应获取错误/响应捕获不起作用
- prometheus - 普罗米修斯中的重复指标?
- python - 如何在 df 上组合行?
- r - 你能从 ggplot2::geom_density_2d_filled 图中得到多边形坐标吗?
- mongodb - Mongo 容器未检索持久数据
- c# - C# 检查控件的父级是否失去焦点
- xamarin - 要求将未引用的程序集包含在 Xamarin 应用程序包中
- reactjs - useContext 调用阻止后续 useState 更新
- powershell - 如何过滤从 CSV 中选择特定列并保存到 Powershell 中的新 csv?