我有设置路由,意味着通过身份验证,以重定向用户到登录页面,如果未经身份验证。我还设置了redux-persist
来自动脱水我的身份验证状态,以便用户在刷新时保持登录。问题是补液太晚,用户已经被重定向到登录页面
第一个位置更改是对经过身份验证的路由的更改,第二个位置更改是对登录的更改。注意补液是在这些之后。理想情况下,它至少应该在@@init之后?
用于使存储持久化的persistStore
函数具有第三个param回调
,该函数在存储重新水化完成后调用。你必须用某种预加载器来启动你的应用程序,它等待补液发生,并且只在它完成后才呈现你的完整应用程序。
redux-persist
文档甚至有一个针对这种情况的方法。在您的示例中,所有React-Router
内容也应该在初始加载程序中呈现:
export default class Preloader extends Component {
constructor() {
super()
this.state = { rehydrated: false }
}
componentWillMount(){
persistStore(this.props.store, {}, () => {
this.setState({ rehydrated: true });
})
}
render() {
if(!this.state.rehydrated){
return <Loader />;
}
return (
<Provider store={store}>
<ConnectedRouter history={history}>
<App />
</ConnectedRouter>
</Provider>
);
}
}
const store = ...; // creating the store but not calling persistStore yet
ReactDOM.render(<Preloader store={store} />, ... );