如何在React和Redux中创建无限滚动？

Question

从“react”导入React，{useState，useEffect}；从“react redux”导入{connect}；从‘././存储/操作’导入{ fetchRecipes }；导入‘/BeerRecipes.css’；const BeerRecipes = ({recipesData，fetchRecipes}) => { const页面，setPage = useState(1)；const菜谱，setRecipes = useState([])；const loading，setLoading =useState(真)；useEffect() => { fetchRecipes()；},[])返回(啤酒食谱{ recipesData && recipesData.recipes && recipesData.recipes。菜谱=> {recipe.name} }；}；const mapStateToProps = => {返回{ recipesData: state.recipes } const mapDispatchToProps =调度=> { fetchRecipes：() =>调度(fetchRecipes())}导出默认连接(mapStateToProps，mapDispatchToProps)(BeerRecipes)；

这是我想要创建无限滚动的组件，下面是我使用axios的redux操作：

从“axios”导入axios；从“./ actionTypes”导入*作为actionTypes；导出const fetchRecipesRequest = () => {返回{ type: actionTypes.FETCH_RECIPES_REQUEST } export =菜谱=> { => { type: actionTypes.FETCH_RECIPES_SUCCESS，有效载荷:菜谱}}导出const fetchRecipesFailure = error =>{ export { type: actionTypes.FETCH_RECIPES_FAILURE，有效载荷:错误}导出const fetchRecipes =(页面) => {返回(调度) => {调度(FetchRecipesRequest) axios .get('https://api.punkapi.com/v2/beers?page=1') .then(响应=> { const食谱= response.data；调度(fetchRecipesSuccess(食谱)；}) .catch(错误=> { const errorMsg = error.message；调度(fetchRecipesFailure(ErrorMsg))；}) }}

我想要创建一个卷轴。我需要，首先，显示前10个元素，然后添加5个元素与每个加载。我一共有25个元素，当列表完成时，它应该从前5个开始。

Answer 1

假设您已经准备好加载下一页的所有内容。您可能可以通过使用像反应视口这样的包来简化整个过程，这样您就不必处理所有滚动监听器。

然后你就这样用它。

import handleViewport from 'react-in-viewport';
 
const Block = (props: { inViewport: boolean }) => {
  const { inViewport, forwardedRef } = props;
  const color = inViewport ? '#217ac0' : '#ff9800';
  const text = inViewport ? 'In viewport' : 'Not in viewport';
  return (
    <div className="viewport-block" ref={forwardedRef}>
      <h3>{ text }</h3>
      <div style={{ width: '400px', height: '300px', background: color }} />
    </div>
  );
};
 
const ViewportBlock = handleViewport(Block, /** options: {}, config: {} **/);
 
const Component = (props) => (
  <div>
    <div style={{ height: '100vh' }}>
      <h2>Scroll down to make component in viewport</h2>
    </div>
    <ViewportBlock 
         onEnterViewport={() => console.log('This is the bottom of the content, lets dispatch to load more post ')} 
         onLeaveViewport={() => console.log('We can choose not to use this.')} />
  </div>
))

这里所发生的是，它创建了一个'div‘，它位于viewport之外，一旦它进入视图端口(它意味着用户已经滚动到底部)，您可以调用一个函数来加载更多的post。

注意:记得在获取函数中添加某种节流阀。