Reactjs 在react redux中进行依赖api调用的正确方法是什么

在我的应用程序中，我们维护作者和书籍以及销售这些书籍的供应商的清单

在我的react js应用程序中，我有一个主页，其中显示了一个包含作者列表的表格，当我们点击任何作者时，我们会进入作者详细信息页面，URL类似于${URL}/author/12。此作者详细信息页面由三部分组成。第一部分包含作者详细信息，如姓名、城市、国家/地区。第二部分包含作者迄今为止出版的书籍列表，这是一个表格，默认情况下选择第一条记录。第三部分包含每本书的详细信息，如标题、说明、，从第二个div中选择书籍时的价格

在这个author details页面中，我使用props.match.params.id中的id，并进行第一个api调用以获取作者详细信息，如果成功，则获取书籍如果成功，则获取所选书籍详细信息。我对我的两种方法感到困惑

方法1：

根据接收到的数据从ui组件进行所有api调用。使用componentwillReceiveProps了解何时获取作者详细信息或书籍。componentwillReceiveProps是否是决定进行后续api调用的正确位置

        class AuthorPage extends React.Component {

      state = {
        authorId:this.props.match.params.id,
      }

      componentDidMount() {
        this.props(fetchAuthorDetails(authorId));
      }


      componentWillReceiveProps(newProps){
        //Is this the right place to decide the subsequent api calls ?
        if(isNotEmpty(newProps.author.details))
          {
            this.props(fetchAuthorBooks(authorId));
          }
          else if (newProps.author.books.length > 0 && isNotEmpty(newProps.author.selectedBook)){
            this.props(fetchSelectedBookDetails(newProps.author.selectedBook.id));
          }
      }


      render() {
        // UI render code goess here
      }


    }

    const mapDispatchToProps = dispatch => bindActionCreators(
      {
        fetchAuthorDetails,
        fetchAuthorBooks,
        fetchSelectedBookDetails
      },
      dispatch,
    )

    const mapStateToProps = (state, ownProps) => ({
        authorDetails: state.author.details,
        books: state.author.books,
        selectedBook: state.author.selectedBook,
        selectedBookDetails : state.author.selectedBook.details
      });

      export default connect(mapStateToProps)(AuthorPage);

方法2：

是否更好地进行后续分派调用（来自ActionCreators分派调用，具体取决于成功/失败），就像我在下面的代码中调用AuthorDetailsAccess/BooksActionCreators.getAuthorBookDetails和authorDetailsError/ErrorsActionsCreator一样？我应该为作者和书籍设置单独的动作创作者档案吗

    export function fetchAuthorDetails(authorId) {
      dispatch(authorDetailsStart());
      return dispatch =>
        fetch('http://localhost/api', {
          method: 'get',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            email: userData.email,
            password: userData.password,
          }),
        })
        .then(response => {
          if (response.status >= 200 && response.status < 300) {
            console.log(response);
            dispatch(authorDetailsSuccess(authorDetails));
            dispatch(BooksActionCrerators.getAuthorBookDetails(authorDetails.id)); //is this the right place to chain
          } else {
            const error = new Error(response.statusText);
            error.response = response;
            dispatch(authorDetailsError());
            dispatch(ErrorsActionsCreator.sendError(error));
            throw error;
          }
        })
        .catch(error => { console.log('request failed', error); });
    }

导出函数fetchAuthorDetails（authorId）{ 调度（authorDetailsStart（））； 返回调度=> 取（'http://localhost/api', { 方法：“get”， 标题：{ “接受”：“应用程序/json”， “内容类型”：“应用程序/json”， }, 正文：JSON.stringify({ 电子邮件：userData.email， 密码：userData.password， }), }) 。然后（响应=>{ 如果（response.status>=200&&response.status<300）{ 控制台日志（响应）； 发送（authordetailssucess（authorDetails））； dispatch（BooksActionCrerators.getAuthorBookDetails（authordDetails.id））；//这是链接的正确位置吗 }否则{ 常量错误=新错误（response.statusText）； error.response=响应； 分派（authorDetailsError（））； 调度（ErrorsActionsCreator.sendError（错误））； 投掷误差； } }) .catch（错误=>{console.log（'request failed'，error）；}）； }

---

就我个人而言，我总是在我的项目中添加

redux thunk

模块。此模块将一个简单的redux操作转换为类似于promise的函数。因此，我可以使用classic

.then（）

sintax连接多个操作。查看更多详细信息。

虽然我知道这种方法，但我想知道哪种方法更好redux action creators api中的方法1 ui或方法2 callSecond解决方案更好。在第一种情况下，您还必须检查您的道具现在是否不是空的，但在它之前是空的，因此调用第二个api，但您还必须检查它是否更改为再次调用第二个api以更新数据，等等。。。更复杂。