javascript - 如何在 redux 中实现 'load more' 功能？

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() 时重新呈现。通常的“加载更多” 行为将初始结果 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
     }
}