reactjs – Redux持续重新水化以前的auth状态为时已晚

发布时间：2020-12-15 20:50:22 所属栏目：百科来源：网络整理

导读：如果未经身份验证,我设置了要进行身份验证的路由,以便将用户重定向到登录页面.我还设置了redux-persist来自动脱水我的身份验证状态,以便用户在刷新时保持登录状态.问题是这种补液太晚了,用户已经被重定向到登录页面第一个位置更改是经过身份验证的路由,第二

如果未经身份验证,我设置了要进行身份验证的路由,以便将用户重定向到登录页面.我还设置了redux-persist来自动脱水我的身份验证状态,以便用户在刷新时保持登录状态.问题是这种补液太晚了,用户已经被重定向到登录页面

第一个位置更改是经过身份验证的路由,第二个是登录.注意在这些之后补充水分.理想情况下,至少应该在@@ INIT之后？

用于使您的商店持久化的persistStore函数具有第三个参数回调,该回调在商店补充完成后调用.您必须使用某种预加载器启动您的应用程序,该预加载器等待补液发生并仅在完成后呈现您的完整应用程序.

对于这种情况,redux-persist docs甚至是have a recipe.在你的情况下,所有的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} />,... );

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!