Получите данные JSON в нескольких компонентах с помощьюactjs и redux

Question

Я хотел бы показать данные из одного API для разных компонентов, поскольку я хочу использовать API только один раз и распределить данные по нескольким небольшим компонентам.Я знаю, что могу сделать это, используя избыточное состояние, но не знаю, как это сделать.Нужна ваша помощь, чтобы достичь этого.Ниже приведен код, сделанный до сих пор.

homepage / index.js

import SlidingBanner from './banner/BannerList';
import Celebslider from './celebrityslider/CelebSlider';

class HomePage extends Component {
        render() {
          return (
            <div>
                <SlidingBanner />
                <anotherslider />
            </div>  
          );
        }
      }

    export default HomePage;

BannerList.js

import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { itemsFetchData } from '../../../actions/items';

class BannerList extends Component {

    componentDidMount() {
        this.props.fetchData();
    }

    render() {
        let bannerArray = [];
        let banner = this.props.items.banner
        for (let key in banner) {
            bannerArray.push(banner[key]);
            return (
                <div>
            <Slider {...slidersettings}>
            {this.props.items.banner.map((item) => (
                    <div key={item.id}>
                        <img src={item.image_url} className="img-responsive"/>
                    </div>
                ))}
            </Slider>        
            </div>
            );
        }
        if (this.props.hasErrored) {
            return <p>Sorry! There was an error loading the items</p>;
        }

        if (this.props.isLoading) {
            return <p>Loading…</p>;
        }
        return (null);
    }
}

BannerList.propTypes = {
    fetchData: PropTypes.func.isRequired,
    items: PropTypes.object.isRequired,
    hasErrored: PropTypes.bool.isRequired,
    isLoading: PropTypes.bool.isRequired
};

const mapStateToProps = (state) => {
    return {
        items: state.items,
        hasErrored: state.itemsHasErrored,
        isLoading: state.itemsIsLoading
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        fetchData: (url) => dispatch(itemsFetchData(url))
    };
};

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

anotherslider.js

Now in this file, i want to fetch another array of objects or object from the same API. 

I tried to mount the API in container component but did not worked, I hope i am doing some mistake. Please correct.  

Answer 1

Если вы хотите вызвать данные в обоих ползунках, у вас есть 2 способа их обработать.

1. Сделайте ваши запросы на добавление в компоненте HomePage.js и свяжите данные с другими компонентами.

2. Когда вы получите данные по компоненту BannerList.js, ваше состояние будет обновлено.Просто добавьте избыточное соединение к вашему anotherslider.js компоненту и получите данные при обновлении.

   const mapStateToProps = (state) => {
       return {
           items: state.items,
           hasErrored: state.itemsHasErrored,
           isLoading: state.itemsIsLoading
       };
   };
   
   export default connect(mapStateToProps, mapDispatchToProps)(HomeList);
   

Answer 2

Помимо всех этих опций, вы также можете использовать Context API Context в качестве провайдера / потребителя для распределения ваших данных между небольшими компонентами ... это избавит вас от передачи реквизитов всем маленьким компонентам и напрямую получит доступ к значению в компоненте, используя Context.Потребитель .. более того, если вы не хотите хранить это состояние в глобальном хранилище избыточных данных, контекстный API избавит вас от него ...

Answer 3

Если вы хотите получить данные в anotherslider.js файле, вы должны подключить редуктор к классу / функции внутри него, а также сделать это в BannerList.js file.Теперь перед рендерингом вызовите функцию componentWillReceiveProps(nextProps) и вы получите здесь свои данные.