Блог

 import React, {useState, useEffect} from 'react';
import {connect} from 'react-redux';

import {
    fetchRecipes
} from '../../store/actions';
import './BeerRecipes.css';

const BeerRecipes = ({recipesData, fetchRecipes}) => {

    const [page, setPage] = useState(1);
    const [recipes, setRecipes] = useState([]);
    const [loading, setLoading] = useState(true);


    useEffect(() => {
        fetchRecipes();
    }, [])

    return (

                <div className='beer_recipes_block'>
                    <div className='title_wrapper'>
                        <h2 className='title'>Beer recipes</h2>
                    </div>
                    <div className='beer_recipes'>
                        <ul className='beer_recipes_items'>
                            {
                                recipesData amp;amp; recipesData.recipes amp;amp; recipesData.recipes.map(recipe =>
                                    <li className='beer_recipes_item' id={recipe.id}>{recipe.name}</li>
                                )
                            }
                        </ul>
                    </div>
                </div>

    );
};

const mapStateToProps = state => {
    return {
        recipesData: state.recipes
    }
}

const mapDispatchToProps = dispatch => {
    return {
        fetchRecipes: () => dispatch(fetchRecipes())
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(BeerRecipes);
 

это мой компонент, в котором я хотел бы создать бесконечную прокрутку, а ниже — мое redux-действие с axios:

 import axios from "axios";
import * as actionTypes from "./actionTypes";

export const fetchRecipesRequest = () => {
    return {
        type: actionTypes.FETCH_RECIPES_REQUEST
    }
}

export const fetchRecipesSuccess = recipes => {
    return {
        type: actionTypes.FETCH_RECIPES_SUCCESS,
        payload: recipes
    }
}

export const fetchRecipesFailure = error => {
    return {
        type: actionTypes.FETCH_RECIPES_FAILURE,
        payload: error
    }
}

export const fetchRecipes = (page) => {
   return (dispatch) => {
       dispatch(fetchRecipesRequest)
        axios
            .get('https://api.punkapi.com/v2/beers?page=1')
            .then(response => {
                const recipes = response.data;
                dispatch(fetchRecipesSuccess(recipes));
            })
            .catch(error => {
                const errorMsg = error.message;
                dispatch(fetchRecipesFailure(errorMsg));
            })
   }
}
 

Я хочу создать прокрутку. Мне нужно, во-первых, отобразить первые 10 элементов, а затем добавить 5 элементов при каждой загрузке. Всего у меня 25 элементов, и когда список будет готов, он должен снова начинаться с первых пяти.