javascript - 如何在 Redux/React 应用程序中加载数据 "on-demand"

Question

我正在尝试制作一个从服务器获取数据的简单 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
}

我的“ Action ”文件中有这些方法:

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.托尔金》

书籍:《魔法的颜色》作者:“特里普拉切特”

我有用于呈现布局的 react 组件“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 react 组件:

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 解决方案。规范的方法是什么？

Answer 1

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

要从 React 分派(dispatch)一个 Action ，您通常有两种选择:

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

第一种情况非常简单，使用 connect 映射您的 Action 创建者并在您的处理程序中调用新注入(inject)的 prop。

对于第二种，你仍然需要绑定(bind)你的 Action 创建者，然后你像这样使用一个 React 生命周期事件

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

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

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