HOC Redux Dispatch 在子组件调用 React componentDidMount 后被调用

Question

我有一个高阶组件 (HOC)，用于授权和刷新用户会话。

这是 RequireAuth HOC，它是 componentWillMount

componentWillMount() {
  console.log('HOC componentWillMount');
   // checks with authorizer that token is valid if not refresh token
    getUserFromLocalStorage()
      // update redux with new refresh token
      .then(data => {
        console.log('getUserFromLocalStorage')
        this.props.setUserToReduxState(data);
        console.log(
          'user sucess retrieved and user setUserToReduxState: ',
          data
        );
      })
      .catch(() => {
        logoutUserFromReduxState();
      });
  }
}

这是我的路线调用

<Route exact path="/devices" component={RequireAuth(Devices)} />

这是我的设备组件的 componentDidMount

componentDidMount() {
  console.log('componentDidMount')
  // calls api
  this.loadData();
}

此子组件调用需要令牌的 API。 但是，当令牌 get 刷新时，它会在设备组件中调用 API get 之前刷新，但是从 HOC 中的 '.then' 承诺返回的 redux 操作不会在子组件中的 api 调用之前更新 redux 状态.

有没有办法在孩子尝试调用 API 之前确保令牌已经更新/redux 状态？

Answer 1

我认为你可以在你的 HOC 中添加一个条件来不呈现你的“增强组件”——在你的情况下是设备，直到 setUserToReduxState 被用户的令牌解决。只有在设置了用户的令牌后，您的设备组件才会呈现 loadDate 方法。

例如- 您可以将用户的状态映射到变量。如果用户不存在 - 不要渲染您传递给 HOC 的组件。

编辑：（添加代码 sn-p）

// In your render method get the current user from redux - see  mapStateToProps functoion
render(){
    const { user } = this.props;
    return (
        return (
        <div>
            {
              user && user.token
              ? <Component {...this.props} />
              : null // Here you can replace this with spinner if you want..
            }
        </div>
      )
    )
}


const mapStateToProps = (state) => ({
    user: state.auth.user
})

现在，当设置用户时，您的组件将重新渲染，并且设备组件将在确定设置令牌时触发 loadData 方法。