Как реализовать функциональность «больше нагрузки» в реакции с избыточностью?

Question

Это текущий процесс отображения списка на нашей странице:

Я вызываю редуктор действий (getListing()), чтобы получить список элементов через mapDispatchToProps

class Listing extends Component {
    constructor(props) {
        super(props);
        this.state = {
            pageSize: 10
        };

        this.props.getlisting(10);
    }

Параметр «10» просто определяет, сколько элементов отображать.Таким образом, это возвращает список из 10 элементов, которые я затем отображаю в методе Листинга render():

listings.map(listing => {
    return (
        <ListingCard
            key={listing.id}
            listing={listing}
        />
    );
})}

Довольно просто до этого момента.Однако в конце списка мне нужна кнопка «Загрузить еще», чтобы загрузить следующие 10 элементов списка.Я представляю себе такой метод:

handleLoadMore() {
    this.setState(prevState => ({    
        pageSize: prevState.pageSize + 10
    }));
    this.props.getListing(this.state.pageSize);
}

С намерением получить список 20 вместо просто 10. И так далее и тому подобное (например, 30, 40, с шагом 10).

Однако, это не работает, потому что весь листинг будет повторно отображаться при срабатывании handleLoadMore().Обычное поведение 'load more' сохраняет начальный интерфейс результатов на экране и просто добавляет следующее число результатов X.

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

Answer 1

Не устанавливайте ничего в местном штате.Просто позвоните по номеру this.props.getListing.

. В вашем действии редукционный редуктор / thunk / saga, когда оно отправляется успешно, вместо замены this.props.listings добавьте к нему:

const initialState = {
  pageSize: 0,
  listings: []
}
​
function myApp(state, action) {
  if (typeof state === 'undefined') {
    return initialState
  }

  switch (action.type) {
     case FETCH_LISTINGS_SUCCESS:
          return {
            ..state,
            pageSize: state.pageSize + 10,
            listings: [...listings, ...action.listings]
          });
        default:
          return state
     }
}