Как обрабатывать избыточное состояние загрузки отдельных элементов, чтобы отображался индикатор загрузки

Question

как вы справляетесь с асинхронным состоянием, таким как загрузка в хранилище с избыточностью для частично загруженных данных?

Представьте, что у вас есть хранилище с избыточностью, в котором содержится каждый загруженный пользователь, и у вас изначально 10 пользователей полностью загружены (ихидентификаторы, имена и т. д.) + следующие 10 идентификаторов пользователей, которые загружены не полностью и их нужно получить на более позднем этапе.

Затем с помощью действия вы можете загрузить 11-го пользователя путем выборки по идентификатору и показать загрузку.для этого запроса.

Вы бы сохранили всех 20 пользователей как 1 объект / пользователя javascript в массиве, где у каждой записи есть переменная isLoading и считали / изменили ее по идентификатору?Или есть другие подходы для этого варианта использования?

Лучше всего и спасибо

Answer 1

Я установил isPatching состояние для каждой записи.В этом случае логическое значение .isPatching добавляется к каждой записи в хранилище, устанавливается равным true в начале, false в конце.За статус записи.

Answer 2

Пример реагирования-редукции:

• если мы загружаем данные из базы данных, то через загрузчик происходит значение 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);

Надеюсь, это поможет вам