reactjs - 加载应用程序后如何触发 API 调用

Question

我正在使用堆栈 React/Redux/Redux-observable/Redux-router。

我想针对休息 api 获取有关当前用户的信息（或者如果未登录，则触发重定向到身份验证门户），以便在启动应用程序时显示适当的屏幕。

我找不到任何合适的方法来做到这一点，因为我的问题是我不知道何时/何地触发这些操作。

Answer 1

我会给你一个 redux 的例子，因为我不熟悉 observables。

您可以在 Root 组件的生命周期方法中调度操作以检索用户信息componentDidMount，并根据收到的内容呈现 UI 的适当部分。

或者，您始终可以根据收到的内容在中间件中渲染路由器并分派适当的导航操作getUserInfo。

class Root extends React.Component {
  componentDidMount() {
    this.props.getUserInfo();
  }

  render() {
    return (
      {this.props.userLoggedIn ? <LoggedInUI /> : <LoginPage />}
    );
  }
}

const mapStateToProps = state => ({
  userLoggedIn: state.user.loggedIn,
});

const mapDispatchToProps = {
  getUserInfo,
};

export default connect(mapStateToProps, mapDispatchToProps)(Root);