get data from dropdown for dynamic call api

Question

So I use redux-hooks for state management, so in my application there is a dropdown, the value will be used to call api dynamically, in the action creator I made it like this

export const getFetchCasesSelectedCountry = (country) => (dispatch) => {
return (
  axios.get(`https://covid19.mathdro.id/api/countries/${country}`).then((result) => {
    let confirmed = result.data.confirmed.value;
    let recovered = result.data.recovered.value;
    let death = result.data.deaths.value;

    dispatch({
      type: GET_SELECTED_COUNTRY,
      payload: {
        countryConfirmed: confirmed,
        countryRecovered: recovered,
        countryDeath: death,
      }
    })
  })
 )
}

but i got this error

how to get the value from the dropdown so that it can be entered into the action creator? is it possible? sorry if my question is hard to understand.

Answer 1

The HTTP error 404, or more commonly called "404 error", means that the api you are trying to use could not be found on the server. This is a client-side incident which means either the endpoint has been deleted or moved, and the URL has not been modified accordingly, or that you have misspelled the URL.

read this for more information

Answer 2

There can be various reasons for 404 issue:

• it can be networking issue - I mean that requested URL is not accessible from your environment. I see from the code that you doing GET request so to test networking you can just open your browser with the URL that is being used in the action. https://covid19.mathdro.id/api/countries/USA for example.

• Code that calls getFetchCasesSelectedCountry provides some weird country value that can result in a 404 error

Nevertheless the code that you've posted, does not handle errors that can arise from axios call (404 for example) so your store won't be aware of errors that can happen, hence component that is connected to the store also won't be aware of such problems.

From my experience, usual approach to handle such things with redux is to introduce more states, that will store error info:

// this is purely an example
// let say that you have such state
const state = {
    loading: false,
    hasError: false,
    errorMessage: '',
    data: null,
}

// reducer
function stateReducer(state, action) {
    switch(action.type) {
        case GET_SELECTED_COUNTRY_LOAD:
            // set here 'loading' to true - started request execution
            // return new state
        case GET_SELECTED_COUNTRY_LOADED:
            // set here 'loading' to false - got response
            // set here data that came with action payload
            // return new state
        case GET_SELECTED_COUNTRY_FAILED:
            // set here 'loading' to false - got error response or failed
            // sethere 'errorMessage' that came with action payload 
            // return new state
    }
}

// you'll have to create 2 new action creators to handle GET_SELECTED_COUNTRY_LOAD // and GET_SELECTED_COUNTRY_FAILED

// now your code should look like this
const getFetchCasesSelectedCountry = (country) => (dispatch) => {
return (
  dispatch({ type: GET_SELECTED_COUNTRY_LOAD });
  axios.get(`https://covid19.mathdro.id/api/countries/${country}`)
     .then((result) => {
         // do some stuff with result
         dispatch({
              type: GET_SELECTED_COUNTRY_LOADED,
              payload: { /* useful data here */ }
         });
      ).catch(err => {
           dispatch({
              type: GET_SELECTED_COUNTRY_FAILED,
              payload: { /* useful error data here */ }
           });
      })
}

So whenever error happens component that is connected to store will be able to handle it (at least show errorMessage that is can get from the store)