如何在Redux中实现“更多加载”功能？

Question

这是在我们的页面中显示列表的当前流程：

我正在调用动作减少器（ getListing() ）以通过mapDispatchToProps获取项目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'行为会将初始结果UI保留在屏幕上，只是追加了下一个X数量的结果。

如何在不重新渲染整个列表的情况下实现此效果？ 我是否应该拥有从商店退回的商品的本地状态副本？

Answer 1

不要在本地状态下设置任何内容。 只需调用this.props.getListing 。

在您的redux reducer / 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
     }
}