Question

考虑以下示例，并假设该组件基于博客的状态进行渲染：

class BlogList extends React.Component {

    componentDidMount() {
        getBlogPosts()
            .then(blogs => this.props.dispatch({
                type: 'LOAD_BLOGS',
                blogs
            }))
    }
}

getBlogPosts调用api，它返回相关博客帖子的列表。我想用这个调用的结果更新redux存储。前面的代码成功地做到了这一点，但是我想把它拉到mapDispatchToProps参数中来连接（），类似于：

const mapDispatchToBlogListProps = (dispatch) => {
    return {
        loadBlogs: getBlogPosts()
                    .then(blogs => dispatch({
                        type: 'LOAD_BLOGS',
                        blogs
                    }))
    }
};

const VisibleBlogList = connect(
    mapStateToBlogListProps,
    mapDispatchToBlogListProps
)(BlogList);

class BlogList extends React.Component {

    componentDidMount() {
        this.props.loadBlogs()
    }
}

这是好习惯吗？有没有更好的办法？可以/我应该在mapDispatch函数中使用promise吗？

Answer 1

您所了解的想法非常普遍，您必须执行此类操作才能处理请求资源。我建议查看redux-thunk middleware。您也可以处理您的示例和更复杂的流程。

您很快就会遇到需要多次调度的情况;例如，您可能需要在请求之前调度加载操作，如果请求成功则调度成功操作，如果错误返回请求则执行失败操作，因为所有这些情况都可能影响您的ui。

使用connect和mapDispatchToProps与异步调用

1 个答案: