Redux Persistent重新水化上一个身份验证状态太晚

Question

我有设置路由，意味着通过身份验证，以重定向用户到登录页面，如果未经身份验证。我还设置了redux-persist来自动脱水我的身份验证状态，以便用户在刷新时保持登录。问题是补液太晚，用户已经被重定向到登录页面

第一个位置更改是对经过身份验证的路由的更改，第二个位置更改是对登录的更改。注意补液是在这些之后。理想情况下，它至少应该在@@init之后？

Answer 1

用于使存储持久化的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} />, ... );