如何处理加载单个项目的 redux state 以显示加载指示器

Question

您如何处理异步 state，例如在 redux 存储中加载部分加载的数据？

想象一下，您有一个 redux 存储，其中包含一个用户缩减程序，它保存每个加载的用户，并且您最初有 10 个完全加载的用户（他们的 id、名称等）+接下来的 10 个未完全加载的用户 id，需要在后面的步骤中获取。

然后通过一个操作，您可以通过 id 获取来加载第 11 个用户，并且需要显示该请求的加载。

您会将所有 20 个用户作为 1 个 javascript 对象/用户存储在一个数组中，其中每个条目都有一个 isLoading 变量并通过 id 从中读取/修改？ 或者这个用例还有其他方法吗？

最好的，谢谢

Answer 1

我为每条记录设置isPatching state。 在这种情况下，将.isPatching boolean 添加到存储中的每条记录，在开始时设置为 true，在结束时设置为 false。 每个记录状态。

Answer 2

react-redux 示例：

• 如果我们从数据库加载数据，那么过度加载器将是真的，当我们在 componentWillReceiveProps 中获取数据时，我们的加载器将变为假。

 /** * home_container: component for home * it is conected with redux store * */ import React, { Component } from 'react'; import { connect } from 'react-redux'; import { getBooks,clearBook } from '../actions'; import BookItem from '../widgetsUI/book_item'; class HomeContainer extends Component { //loader state = { loading: true } //getBooks from database componentWillMount(){ this.props.dispatch(getBooks(5,0,'desc')) } //if we receiving new props componentWillReceiveProps (nextProps) { // console.log(nextProps) this.setState({ loading: false }) } //rendering bookItems renderItems = (books) => ( books.list? books.list.map(item => ( <BookItem {...item} key = { item._id } /> )): null ) //loadmore button loadmore = () => { this.setState({ loading: true }) const count = this.props.books.list.length; this.props.dispatch(getBooks(5,count,'desc',this.props.books.list)) } render() { if(this.state.loading){ return <div className="loader"> Loading... </div> } return( <div> {this.renderItems(this.props.books)} <div className='loadmore' onClick={this.loadmore} >Load More</div> </div> ) } } function mapStateToProps(state){ //console.log(state) return { books: state.books } } export default connect(mapStateToProps)(HomeContainer);

我希望这能帮到您