如何在 Redux/React 应用程序中“按需”加载数据答案

【问题标题】：How to load data "on-demand" in Redux/React app如何在 Redux/React 应用程序中“按需”加载数据
【发布时间】：2018-07-04 08:32:39
【问题描述】：

我正在尝试制作一个从服务器获取数据的简单 React+Redux 应用程序。我了解 Redux 的基本原理，但在教程中的任何地方都找不到如何实现“按需加载数据”之类的示例。我的 API 可以返回书籍列表，如下所示：

 [
  {
    title: 'The Hobbit',
    authorId: 1
  },
  {
    title: 'The Colour of Magic',
    authorId: 2
  }
]

还有另一个由特定作者获取数据的调用，这个调用将返回类似这样的内容（通过 authorId）：

{
  title: 'J. R. R. Tolkien',
  authorId: 1
}

 or

{
  title: 'Terry Pratchett',
  authorId: 2
}

我的“动作”文件中有这些方法：

export function loadBooksSuccessfully(books) {
    return {type: types.LOAD_BOOKS, books};
}

export function loadBooks() {
    return function (dispatch) {
        return MyApi.getBooks().then(data => {
            dispatch(loadBooksSuccessfully(data));
        }).catch(err => {
            throw(err);
        });
    };
}

我在主 js 文件中调用 loadBooks() 操作以在页面加载时显示书籍列表。我的问题是我不知道应该在哪里请求有关作者的信息以按以下格式显示列表：

书籍：《霍比特人》作者：《J. R. R. 托尔金》

书籍：“魔法的颜色” 作者：“特里·普拉切特”

我有响应组件“BooksList”和“BookItem”来呈现布局。我通过 mapStateToProps 方法将书籍列表传递给 BooksList：

class BooksList extends React.Component {
    render() {
        let books = this.props.books;

        return <div>
            {books.map((book) => {
                return <BookItem key={`my-book-${book.id}`}
                                 {...book} />
            })}
        </div>
    }
}

function mapStateToProps(state, ownProps) {
    return {
        books: state.app.books
    };
}

function mapDispatchToProps(dispatch) {
    return {};
}

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

这是我的 BookItem 反应组件：

class BookItem extends React.Component {
    public render() {
        const book = this.props.book;

        return (<div>
            <div>
                Book: {book.name}
            </div>
            <div>
                Author: {book.author.name}
            </div>
        </div>);
    }
}

这是加载作者信息的操作：

export function loadAuthorSuccessfully(author) {
    return {type: types.LOAD_AUTHOR, author};
}

export function loadAuthor(authorId) {
    return function (dispatch) {
        return MyApi.getAuthor(authorId).then(data => {
            console.info('DATA', data);
            dispatch(loadAuthorSuccessfully(data));
        }).catch(err => {
            throw(err);
        });
    };
}

我想在 BookItem 组件的 componentDidMount 方法中调用 loadAuthor() 方法，但它看起来不像真正的 redux 解决方案。规范的做法是什么？

【问题讨论】：

标签： javascript reactjs redux

【解决方案1】：

使用 Redux 加载数据只是调度操作的一种特殊情况。

要从 React 调度一个动作，您通常有两种选择：

1) 您在某个事件处理程序中分派 - 用户单击按钮或链接，切换复选框......对事件的响应。 2) 您在特定组件即将挂载/挂载时调度 - 屏幕上会出现某些内容，而无需用户点击。

第一种情况非常简单，使用connect 映射您的动作创建者并在您的处理程序中调用新注入的道具。

对于第二个，你仍然需要绑定你的动作创建者，然后你使用像这样的 React 生命周期事件之一

class AuthorPage extends React.Component {
  componentDidMount(){
    this.props.loadAuthor()
  }
}

第二种方法意味着您需要考虑到组件首次渲染时数据可能尚未准备好，因此您可能会将其保持在 Redux 状态并显示微调器或 null 直到它准备好。

希望对您有所帮助，我建议您观看 Dan Abramov 的 Egghead 视频系列。在 Stackoverflow 上，您的 2 小时时间将为您节省数十人。 :)

【讨论】：