redux async structures

async.js

function fetcher(url) {
  return fetch(url).then(res => res.json())
}

async function get(url) {
  var result = await fetcher(url);
  return result
}

get('https://jsonplaceholder.typicode.com/users')
  .then(res => {console.log(res)})
  .catch(err => {console.log(err)})

asyncTryCatch.js

async function get(url) {
  try {
    let response = await fetch(url).then(res => res.json())
    return {success: true, data: response }
    } catch (e) {
    return {success: false, data: e.message }
  }
}

let url = 'https://jsonplaceholder.typicode.com/users'

let users = await get(url)
// {success: true, data: Array(10)}

dispatch.js

let API = {
  get: (url) =>
     fetch(url)
      .then(res => res.json())
      .catch(err => err) 
}


let mapDispatchToProps = dispatch => ({
  getUsers: (url) => {
    API.get(url)
      .then(res => {dispatch(updateUsers(res))})
      .catch(err => {dispatch(getUserError(err))})
  }
})


// simulate in console 
var dispatch = x => null
var updateUsers = res => {console.log('update users with data', res)}
var getUserError = err => {console.log('error is ', err)}
var props = mapDispatchToProps(dispatch)

props.getUsers('https://jsonplaceholder.typicode.com/users')

promise.js

var get = (url) =>
   fetch(url)
    .then(res => res.json())
    .catch(err => err) 

var url = 'https://jsonplaceholder.typicode.com/users'

get(url).then(res => {console.log(res)}).catch(err => console.log(err))

fetch and return a promise

redux async flow without middleware / related

with middleware:

redux-promise-middleware

react-redux-fetch

docs