state.js

import axios from 'axios'

const createUrlLoader = url => {
  const initialState = {
    loading: false,
    data: null,
    error: null
  }

  const STARTED_LOADING = 'STARTED_LOADING'
  const ENDED_LOADING = 'ENDED_LOADING'
  const ERROR_LOADING = 'ERROR_LOADING'

  const reducer = (state, action) => {
    switch (action.type) {
      case STARTED_LOADING:
        return { ...state, loading: true }
      case ENDED_LOADING:
        return { ...state, data: action.data, loading: false }
      case ERROR_LOADING:
        return { ...state, error: action.error, loading: false }
    }
    return state
  }

  const createActions = ({ getState, dispatch }) => {
    const loadData = () => {
      if (getState().data || getState().error || getState().loading) {
        return;
      }
      
      return dispatch(STARTED_LOADING)
        .then(() => axios.get(url))
        .then(response => response.data)
        .then(data => dispatch(ENDED_LOADING, { data }))
        .catch(error => dispatch(ERROR_LOADING, { error }))
    }

    return { loadData }
  }

  return {
    initialState,
    reducer,
    createActions
  }
}

export default createUrlLoader