How to get my products from external API using react native?

Question

Hi am new to this language.I want to structure my app in actions,reducers,containers,components,App.js,index.js folders.I am confused where should i write a fetch funtion..If i write it in a reducers it shows error message..anyone please help me

Answer 1

I wrote the fetch action in actions/index.js and then dispatched this action in matStateToProps and mapDispacthToProps under containers/shop.js.It will call another component components/ShopComponent.js which will call the 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
          }
          }

  }