如何通过无限滚动从 redux/react 中的 api 获取逐步数据

Question

I want to get 20 posts by scroll down each time how can i do? my project have big Data and I use redux for get data, can I get data step by step? for example get 20 posts for first time and when a user scroll down load the next 20 posts. I use React Hooks for develop

my posts component source is:

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 } }) => {
    useEffect(() => {
        getPosts();
    }, [getPosts]);


    return loading ? <Spinner /> : (

                {posts.map(post => (
                   <PostItem key={post._id} post={post} />
                ))}

    )
}

Posts.propTypes = {
    getPosts: PropTypes.func.isRequired,
    post: PropTypes.object.isRequired
}

const mapStateToProps = state => ({
    post: state.post
});

export default connect(mapStateToProps, { getPosts })(Posts)

my action code is:

import { setAlert } from './alert';
import {
    GET_POSTS,
    POST_ERROR
} from "../actions/types";

// Get Posts
export const getPosts = () => async dispatch => {
    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;
    }

}

Answer 1

You can use react-infinite-scroller library. I've tried to change your Posts method, so maybe it would be useful.but as mentioned in comments you should add pagination to your API.

   const Posts = ({ getPosts, post: { posts, loading } }) => {
        useEffect(() => {
            getPosts();
        }, [getPosts]);

       const itemsPerPage = 20;
       const [hasMoreItems, sethasMoreItems] = useState(true);
       const [records, setrecords] = useState(itemsPerPage);

     const showItems=(posts)=> {
        var items = [];
        for (var i = 0; i < records; i++) {
          items.push(  <PostItem key={posts[i]._id} post={posts[i]} />);
        }
        return items;
      }

      const loadMore=()=> {
        if (records === posts.length) {
          sethasMoreItems(false);
        } else {
          setTimeout(() => {
            setrecords(records + itemsPerPage);
          }, 2000);
        }
      }



      return  <InfiniteScroll
              loadMore={loadMore}
              hasMore={hasMoreItems}
              loader={<div className="loader"> Loading... </div>}
              useWindow={false}
            >
              {showItems()}
            </InfiniteScroll>{" "}

     }

Working Codesandbox sample with fake data.