HTTP Failure in Axios for REST api GET - http

Question

I'm new to react-native and when I trying to get data from RESR api and it nicely work for github api, I used following example for developing
https://blog.cloudboost.io/getting-started-with-react-native-and-redux-6cd4addeb29
And I change this for get from another from REST api it shows that following error
HTTP Failure in Axios [Error: Network Error]
Object {
"error": Object {
"data": "Network Error",
"status": 0,
},
"meta": Object {
"previousAction": Object {
"payload": Object {
"request": Object {
"url": "/XXXX/list",
},
},
"type": "my-awesome-app/repos/LOAD",
},
},
"type": "my-awesome-app/repos/LOAD_FAIL",
}
Do you guys have any idea

Answer 1

There seems to be a problem with the url config that you're trying to use in the tutorial that you've mentioned.
I'm using this api from the docs https://dog.ceo/api/breed/hound/images
As per the tutorial and the comments that you've mentioned here are the relevant changes for the api and the reducers
App.js
// Changing the URL here
const client = axios.create({
baseURL: 'https://dog.ceo/',
responseType: 'json'
});
HoundsList.js
class HoundsList extends Component {
componentDidMount() {
this.props.listHounds('hound');
}
renderItem = ({ item }) => (
<View style={styles.item}>
<Text>{item}</Text>
</View>
);
render() {
const { hounds } = this.props;
return (
<FlatList
styles={styles.container}
data={hounds}
renderItem={this.renderItem}
/>
);
}
}
const mapStateToProps = state => {
return {
hounds: state.hounds.message
};
};
const mapDispatchToProps = {
listHounds
};
export default connect(mapStateToProps, mapDispatchToProps)(HoundsList);
reducer.js
export const GET_HOUNDS = 'my-awesome-app/hounds/LOAD';
export const GET_HOUNDS_SUCCESS = 'my-awesome-app/hounds/LOAD_SUCCESS';
export const GET_HOUNDS_FAIL = 'my-awesome-app/hounds/LOAD_FAIL';
export default function reducer(state = { hounds: [] }, action) {
switch (action.type) {
case GET_HOUNDS:
console.log('Loading')
return { ...state, loading: true };
case GET_HOUNDS_SUCCESS:
console.log('Success')
return { ...state, loading: false, hounds: action.payload.data };
case GET_HOUNDS_FAIL:
console.log('failure')
return {
...state,
loading: false,
error: 'Error while fetching hounds list'
};
default:
return state;
}
}
export function listHounds(breed_name) {
return {
type: GET_HOUNDS,
payload: {
request: {
url: `/api/breed/${breed_name}/images`
}
}
};
}