Question

我不确定它是否是反模式，我在路由级别创建了一个HOC并在其中获取用户详细信息：

class PrivateRoute extends Component {
  render() {
    const { component : RouteComponent, checkAuth, ...rest } = this.props
    const route = (
      <Route
        {...rest}
        render={(props) => {
          return checkAuth() === true
            ? <RouteComponent {...props} />
            : <Redirect to={{pathname : '/login'}} />
        }}
      />
    )

    return route
  }

  componentWillMount() {
    const { store } = this.props
    const { user } = store.getState()
    const accessToken = getCookie('access_token')

    if (!user.userInfo && accessToken) {
      store.dispatch(getUserDetails(accessToken)) // Setting user details in redux store.
    }
  }
}

const routes = (checkAuth, store) => (
  <div className='app grid'>
    <ConnectedNavbarContainer />
    <div className='col'>
      <Switch>
        <Redirect exact={true} from='/' to='/dashboard' />
        <Route path='/login' component={ConnectedLoginContainer} />
        <PrivateRoute 
          store={store}
          checkAuth={checkAuth} 
          path='/:id/dashboard' 
          component={ConnectedDashboardContainer} 
        />
        <PrivateRoute 
          store={store}
          checkAuth={checkAuth} 
          path='/select-store' 
          component={ConnectedSelectStoreContainer} 
        />
      </Switch>
    </div>
  </div>
)

观察componentWillMount的{{1}}函数，我将获取用户详细信息并将其保存在redux存储中。现在问题是PrivateRoute是异步调用，getUserDetails的子组件将进行网络调用以呈现该页面，并且那些网络调用需要userID，它将出现在PrivateRoute调用的响应中。

现在我希望子组件等到getUserDetails调用解析完毕。我不知道该怎么做。

Answer 1

创建一个操作，该操作将在redux存储中设置一个状态，以反映正在检索的用户详细信息。这将使子组件知道用户详细信息尚未准备就绪，并显示相应的消息（例如，加载...＆＃39;或初始化...＆＃39;）。

检索用户详细信息时，应适当更新上述状态。如果检索到用户详细信息失败，则触发另一个将状态设置为错误的操作（并清除“在进程中加载状态”），以使子项显示错误消息。

仅当父进程的网络呼叫承诺在react中解析时才渲染子组件

1 个答案: