加載應用程序后如何觸發API調用

Question

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

我想針對其余api獲取有關當前用戶的信息（如果未登錄則觸發到認證門戶的重定向），以便在啟動應用程序時可以顯示適當的屏幕。

我找不到任何合適的方法來執行此操作，因為我的問題是我不知道何時/何地觸發這些操作。

Answer 1

我將為您提供一個redux示例，因為我對可觀察對象並不熟悉。

您可以調度操作以在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);