Redux persist 重新水化以前的身份验证状态为时已晚答案

【问题标题】：Redux persist rehydrate previous auth state too lateRedux persist 重新水化以前的身份验证状态为时已晚
【发布时间】：2017-04-02 13:18:41
【问题描述】：

我已经设置了经过身份验证的路由，以便在未经身份验证的情况下将用户重定向到登录页面。我还设置了redux-persist 来自动脱水我的身份验证状态，以便用户在刷新时保持登录状态。问题是这种补液为时已晚，用户已经被重定向到登录页面

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

【问题讨论】：

您可以通过两种不同的方法来解决它，1.创建一个页面处理/加载，当您收到用户身份验证状态时重定向到您需要的页面。 2. 第一个位置应该是登录，如果已经登录，则重定向。更好的用户体验

标签： reactjs redux react-redux

【解决方案1】：

用于使您的存储持久化的persistStore 函数具有第三个参数callback，该参数在存储恢复完成后被调用。您必须使用某种预加载器来启动您的应用程序，它等待补液发生并仅在完成后呈现您的完整应用程序。

redux-persist 文档甚至 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} />, ... );

【讨论】：

现在还有 PersistGate 组件，它使得延迟渲染直到再水化变得更加容易和合乎逻辑：github.com/rt2zz/redux-persist
@SomethingOn 似乎无济于事。甚至 PersistGate 也有同样的问题。
@PetrosKyriakou 听起来您可能需要添加一些检查以确定何时/什么渲染。在商店重新水化之前，PersistGate 不应渲染任何子组件。在 render 方法中设置一个断点，并验证在 rehydrate 操作触发之前它不会被调用。如果它是在 store 重新水化后渲染的，请验证您的容器/选择器等是否为您的组件设置了适当的 props。

【解决方案2】：

当用户刷新页面时，第一个LOCATION_CHANGE 将触发，因为您将历史记录与商店同步。但是，它只同步历史记录，还没有将用户重定向到任何地方。

唯一重要的是第二个LOCATION_CHANGE，它应该出现在persistStore() 之后。好消息是persistStore() 有回电。

const store = ...

// persist store
persistStore(store, options, () => {
  const states = store.getState();

  // if authenticated, do nothing,
  // if not, redirect to login page
  if (!states.auth.isAuthenticated) {
    // redirect to login page
  }
});

render(...);

希望这可以帮助您解决问题。

【讨论】：