使用 reactjs 和 redux 在多个组件中获取 JSON 数据

Question

我想将来自单个 API 的数据显示给不同的组件，因为我只想访问 API 一次并将数据分发到多个小组件。我知道我可以通过使用 redux state 来做到这一点，但不知道该怎么做。需要您的帮助来实现这一目标。以下是到目前为止完成的代码。

主页/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

如果您想在 anotherslider.js 文件中获取数据，您必须将 reducer 连接到其中的类/函数，以及在 BannerList.js 文件。 现在在渲染调用componentWillReceiveProps(nextProps) 函数之前，您将在此处获取数据。

Answer 2

如果你想在两个滑块中调用数据，你有两种方法来处理它。

1. 在HomePage.js 组件中发出您的redux 请求并将数据绑定到其他组件。

2. 当您获得BannerList.js 组件上的数据时，您的状态将被更新。只需将 redux 连接添加到您的 anotherslider.js 组件并在更新时获取数据。

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

Answer 3

除了所有这些选项之外，您还可以使用 react 的 Context API 作为 Provider/consumer 来在小组件之间分发您的数据......这将节省您将 props 传递给所有小组件并使用 Context 直接访问组件中的值。消费者 .. 此外，如果您不想将此状态存储在全局 redux 存储中，上下文 API 会将您从中拯救出来......