React native 如何使用react native从外部API获取产品？
嗨，我是这门语言的新手。我想用动作、减缩器、容器、组件、app.js、，index.js文件夹。我不知道应该在哪里编写获取函数。如果我在reducers中编写，则会显示错误消息。请任何人帮助我我在actions/index.js中编写了获取操作，然后在containers/shop.js下的matStateToProps和mapdispatchtoprops中调度此操作。它将调用另一个组件components/ShopComponent.js，它将调用道具React native 如何使用react native从外部API获取产品？,react-native,react-redux,React Native,React Redux,嗨，我是这门语言的新手。我想用动作、减缩器、容器、组件、app.js、，index.js文件夹。我不知道应该在哪里编写获取函数。如果我在reducers中编写，则会显示错误消息。请任何人帮助我我在actions/index.js中编写了获取操作，然后在containers/shop.js下的matStateToProps和mapdispatchtoprops中调度此操作。它将调用另一个组件components/ShopComponent.js，它将调用道具 actions/index.js:
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
}
}
}
actions/index.js:
***************************
导出常量fetchAllAPI=（）=>{
log（“fetchAllAPI调用”）；
返回（发送）=>{
分派（fetchTrend（））
分派（fetchSpecial（））
分派（fetchBanner（））
我保证([
获取（'url1'{
方法：“获取”，
标题：{
“内容类型”：“应用程序/json”，
“x-api-key”：“key”
}
}),
获取（'url2'{
方法：“张贴”，
标题：{
“内容类型”：“应用程序/json”，
“x-api-key”：“key”
},
正文：JSON.stringify({
“查询”：{
“布尔”：{
“应该”：[
{“匹配短语”：{“ColumnOne”：“true”}，
{“匹配”短语：{“ColumnTwo”：“true”}，
{“匹配短语”：{“第三列”：“真”}，
{“匹配”短语：{“ColumnFour”：“true”}
]
}
}
}),
}),
获取（'url3'{
方法：“获取”，
标题：{
“内容类型”：“应用程序/json”，
“x-api-key”：“key”
}
}),
]).然后（（所有响应）=>{
所有响应[0]。json（）。然后（（响应1）=>{
调度（fetchOk（response1））；
})
allResponses[1].json（）.then（（response2）=>{
调度（fetchOkSpecial（response2.hits.hits））；
})
所有响应[2].json（）.then（（响应3）=>{
console.log（“横幅响应”+response3）；
派送（获取BanneRok（响应3.项目））
})
})
.catch（（错误）=>{
{console.log（“Catch Called”）；}
console.log（错误）；
分派（fetchFail（））
})
}}
Containers/Shop.js：
*************************
从“React”导入React，{Component}；
导入{样式表、文本、视图、图像、警报、平台、，
触控高光，
RefreshControl，TextInput}来自“react native”；
从“../Components/ShopComponent”导入ShopComponent；
从导入{fetchAllAPI}
“../actions”；
从'react redux'导入{connect}；
从“../reducers/index”导入所有reducer；
常量mapStateToProps=（状态）=>{
返回{
数据：state.trending，
}
}
const mapDispatchToProps=（调度）=>{
返回{
onRenderFetchAPI:（）=>{
调度（fetchAllAPI（））；
}
}
}
导出默认连接（MapStateTrops、mapDispatchToProps）
（构成部分）；
Components/ShopComponent.js：
***************************************
导出默认类ShopComponent扩展组件{
建造师（道具）{
超级（道具）；
}
componentDidMount（）{
this.props.onRenderFetchAPI（）；
//this.props.onRenderFetchSpecial（）；
//this.props.onRenderFetchTrend（）；
}
静态导航选项={
抽屉图标：（{tintColor}）=>(
),
}
render（）{
返回{
//渲染我们想要的设计
}
}
}