Question

你是我对这种语言的新手。我想在动作，缩减器，容器，组件，App.js，index.js文件夹中构建我的应用程序。我很困惑，我应该在哪里写一个获取功能..如果我写它在减速器中它显示错误消息。任何人请帮助我

Answer 1

我在actions / index.js中编写了fetch操作，然后在matStateToProps和mapDispacthToProps中调用了这个动作在containers / shop.js.下，它将调用另一个组件组件/ ShopComponent.js来调用props。

 actions/index.js:
 ***************************
 export const fetchAllAPI = () => {
  console.log("fetchAllAPI called");
  return(dispatch) =>{
    dispatch(fetchTrend())
    dispatch(fetchSpecial())
         dispatch(fetchBanner())

         Promise.all([
        fetch('url1',{
            method: "GET",
            headers: {
                'Content-Type':'application/json',
              'x-api-key': 'key'
            }
          }),

        fetch('url2',{
            method: "POST",
            headers: {
                'Content-Type':'application/json',
              'x-api-key': 'key'
            },
            body : JSON.stringify({
                "query": {
                    "bool": {
                        "should": [
                            { "match_phrase": { "ColumnOne": "true" } },
                            { "match_phrase": { "ColumnTwo": "true" } },
                            { "match_phrase": { "ColumnThree": "true" } },
                            { "match_phrase": { "ColumnFour": "true" } }
                        ]
                    }
                }
            }),
          }),
          fetch('url3',{
            method: "GET",
            headers: {
                'Content-Type':'application/json',
              'x-api-key': 'key'
            }
          }),

    ]).then((allResponses)=>{
        allResponses[0].json().then((response1)=>{
                                    dispatch(fetchOk(response1));
                                })
        allResponses[1].json().then((response2)=>{
                                    dispatch(fetchOkSpecial(response2.hits.hits));
                                })
        allResponses[2].json().then((response3)=>{
                                    console.log("banner response"+response3);
                                    dispatch(fetchBannerOk(response3.Items))    
                                })                        
    })

            .catch((error)=>{
        {console.log("Catch Called");}
        console.log(error);
       dispatch(fetchFail())
    })
}}
Containers/Shop.js:
*************************
import React, { Component } from 'react';
 import {StyleSheet, Text, View, Image, Alert, Platform,
TouchableHighLight, 
RefreshControl, TextInput} from 'react-native';
import ShopComponent from '../Components/ShopComponent';
 import { fetchAllAPI} from 
 '../actions';
 import {connect} from 'react-redux';
 import allReducers from '../reducers/index';
  const mapStateToProps = (state) =>{
       return{
             data : state.trending,

             }
             }

 const mapDispatchToProps = (dispatch) =>{

return{

     onRenderFetchAPI : () => {
         dispatch(fetchAllAPI());
     }

}
}
  export default connect(mapStateToProps,mapDispatchToProps)
  (ShopComponent);

 Components/ShopComponent.js:
 ***************************************
  export default class ShopComponent extends Component{
constructor(props){
    super(props);
    }

componentDidMount(){
  this.props.onRenderFetchAPI();
  // this.props.onRenderFetchSpecial();
  //  this.props.onRenderFetchTrend();

 }
static navigationOptions ={
  drawerIcon: ({tintColor }) => (
    <Image
    source = {require('../assets/shoppingicon.png')}
    style={{height:50,width:'100%',resizeMode:'contain'} }/>
),

   }
 render(){
   return{
         //render the design we want
          }
          }

  }

如何使用本机反应从外部API获取我的产品？

1 个答案: