Quiero obtener 20 publicaciones desplazándome hacia abajo cada vez ¿cómo puedo hacerlo? mi proyecto tiene Big Data y uso redux para obtener datos, ¿puedo obtener datos paso a paso? por ejemplo, obtenga 20 publicaciones por primera vez y cuando un usuario se desplace hacia abajo cargue las siguientes 20 publicaciones. Yo uso React Hooks para desarrollar

La fuente del componente de mis publicaciones es:

import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import Spinner from '../layout/Spinner'; import PostItem from './PostItem'; import { getPosts } from '../../actions/post'; const Posts = ({ getPosts, post: { posts, loading } }) ={amp}gt; { useEffect(() ={amp}gt; { getPosts(); }, [getPosts]); return loading ? {amp}lt;Spinner /{amp}gt; : ( {posts.map(post ={amp}gt; ( {amp}lt;PostItem key={post._id} post={post} /{amp}gt; ))} ) } Posts.propTypes = { getPosts: PropTypes.func.isRequired, post: PropTypes.object.isRequired } const mapStateToProps = state ={amp}gt; ({ post: state.post }); export default connect(mapStateToProps, { getPosts })(Posts) 

mi código de acción es:

 import { setAlert } from './alert'; import { GET_POSTS, POST_ERROR } from "../actions/types"; // Get Posts export const getPosts = () ={amp}gt; async dispatch ={amp}gt; { try { const res = await axios.get('/api/ads'); dispatch({ type: GET_POSTS, payload: res.data }); } catch (err) { dispatch({ type: POST_ERROR, payload: { msg: err.response.satusText, status: err.response.satus } }); } }``` /////////////////////////////// ///////////////AND REDUCER IS : import { GET_POSTS, POST_ERROR } from '../actions/types'; const initialState = { posts: [], loading: true, error: {} }; export default function (state = initialState, action) { const { type, payload } = action; switch (type) { case GET_POSTS: return { ...state, posts: payload, loading: false } case POST_ERROR: return { ...state, error: payload, loading: false } default: return state; } } 

Puede usar la biblioteca react-infinite-scroller . Intenté cambiar su método de publicaciones, por lo que tal vez sería útil. Pero como se menciona en los comentarios, debe agregar paginación a su API.

  const Posts = ({ getPosts, post: { posts, loading } }) ={amp}gt; { useEffect(() ={amp}gt; { getPosts(); }, [getPosts]); const itemsPerPage = 20; const [hasMoreItems, sethasMoreItems] = useState(true); const [records, setrecords] = useState(itemsPerPage); const showItems=(posts)={amp}gt; { var items = []; for (var i = 0; i {amp}lt; records; i  ) { items.push( {amp}lt;PostItem key={posts[i]._id} post={posts[i]} /{amp}gt;); } return items; } const loadMore=()={amp}gt; { if (records === posts.length) { sethasMoreItems(false); } else { setTimeout(() ={amp}gt; { setrecords(records   itemsPerPage); }, 2000); } } return {amp}lt;InfiniteScroll loadMore={loadMore} hasMore={hasMoreItems} loader={{amp}lt;div className="loader"{amp}gt; Loading... {amp}lt;/div{amp}gt;} useWindow={false} {amp}gt; {showItems()} {amp}lt;/InfiniteScroll{amp}gt;{" "} } 

Códigos de trabajo y muestra de caja con datos falsos.