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

Question

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

假设您有一个带有用户 reducer 的 redux 存储，其中包含每个加载的用户，并且您最初有 10 个完全加载的用户（他们的 id、名称等）+接下来的 10 个未完全加载的用户 id，需要在后面的步骤。

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

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

最好的，谢谢你

Answer 1

我为每条记录设置了isPatching 状态。在这种情况下，.isPatching 布尔值被添加到存储中的每条记录，在开始时设置为 true，在结束时设置为 false。按记录状态。

Answer 2

react-redux 示例：

• 如果我们从数据库中加载数据，那么 over loader 将变为 true，当我们在 componentWillReceiveProps 中获取数据时，我们的加载器将变为 false。

   /**
    * 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);

希望对你有帮助