react-native HTTP Requests Using Promises with the fetch API and Redux
Example
Redux is the most common state management library used with React-Native. The following example demonstrates how to use the fetch API and dispatch changes to your applications state reducer using redux-thunk.
export const fetchRecipes = (action) => {
return (dispatch, getState) => {
fetch('/recipes', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
recipeName,
instructions,
ingredients
})
})
.then((res) => {
// If response was successful parse the json and dispatch an update
if (res.ok) {
res.json().then((recipe) => {
dispatch({
type: 'UPDATE_RECIPE',
recipe
});
});
} else {
// response wasn't successful so dispatch an error
res.json().then((err) => {
dispatch({
type: 'ERROR_RECIPE',
message: err.reason,
status: err.status
});
});
}
})
.catch((err) => {
// Runs if there is a general JavaScript error.
dispatch(error('There was a problem with the request.'));
});
};
};
