Question

我正在尝试创建一个从服务器获取数据的简单React + Redux应用程序。我理解Redux的基本原理，但我无法在教程中的任何地方找到如何实现像＃34;按需加载数据＆＃34;这样的东西的例子。我的API可以返回书籍列表，如下所示：

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

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

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

 or

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

我在我的＆＃34;行动＆＃34;中有这些方法。文件：

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（）动作，以在加载页面时显示书籍列表。我的问题是，我不知道在哪里可以请求有关作者的信息以下列格式显示列表：

书：＆＃34;霍比特人＆＃34; 作者：＆＃34; J。 R. R. Tolkien＆＃34;

书：＆＃34;魔术的颜色＆＃34; 作者：＆＃34; Terry Pratchett＆＃34;

我有反应组件＆＃39; BooksList＆＃39;和＆＃39; BookItem＆＃39;用于渲染布局。我通过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解决方案。做这个规范的方法是什么？

Answer 1

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

要从React发送操作，通常有两个选项：

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

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

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

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

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

希望它有所帮助，我建议你观看Dan Abramov的Egghead视频系列。 2小时的时间将在Stackoverflow上节省数十个。：）

如何加载数据＆＃34;按需＆＃34;在Redux / React app中

1 个答案: