REact/redux app api call not working : showing empty and aciton not running issue

Question

hi guys I am creating a react native app having some problem when calling api get request its like the response giving some error seems like action not running ill share code below please if anyone know the issue please let me know

NOTE -- when I run the app console in reducer and console in action are not running aslo

---

error message in console DetailsReducer reducer value in component when i do mapstatetoprops and check the value of reducer its showing like below

Object { details: {}, isFetching: false, error: false }
details: Object {  }
<prototype>: Object { … }
error: false
isFetching: false
<prototype>: Object { … }

---

action file

export function fetchdetails(seesionkey) {
  return function (dispatch, getState) {
    fetch(`api url`, {
        method: 'GET',
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
          seesionkey,
        },
        body: JSON.stringify({
          "appcont": getState().mustdata,
          "dataset":{}
        }),
      })
      .then(r => r.json())
      .then((rr) => {
        console.log('------testinresponse',rr);
        if (rr.response.error.errorCode === -4) {
          dispatch({
            type: 'FETCHFAIL',
            payload: ' error  again',
          });
        } else {
          dispatch({
            type: 'FETCHSUCCESS',
            payload: rr,
          });
        }

  })
}
}

---

reducer

const initialState = {
    details: {},
    isFetching: false,
    error: false
}
export default function DetailsReducer(state = initialState, action) {

    switch(action.type) {
        case :FETCHSUCCESS
            console.log('action goes here', action)
            return {
                ...state,
                isFetching: false,
                details: action.payload
            }
        case FETCHFAIL:
            return {
                ...state,
                isFetching: false,
                error: true
            }
        default:
            return state
    }
}

component call

---

componentDidMount() {
 const {seesionkey} = this.props
 this.props.dispatch(fetchdetails(seesionkey));

  }

---

mock api

{   
    "appcont":{
      "id":"34435654605",
      "name":"no data ",
      "details":dummy details",
      "code":"demo",
      
   },
   "dataset":{
        
   }
}

Answer 1

Without seeing the full component definition I cant 100% say for sure, but are you checking that the details is not empty before you log it out? When the component first mounts, it will be empty, until the request comes back -- when a second render will occur.

Typically, in the component render you would render nothing until it comes back. Its up to you to handle the case where the network request is still in flight:

render() {
   if (Object.keys(this.props.details).length === 0) return null

   // rest of component
}

It would probably be better to use isFetching in the condition but you will need another action just before the fetch call to set this.

Probably the reason the action doesnt even fire is your render already blew up because it couldnt handle the empty case.

Another problem could be if you have not configured https://github.com/reduxjs/redux-thunk on your store. You are using thunks, so you might see what you're seeing if you didnt configure them.

Btw, off topic, but you probably want the dispatch in componentWillMount and not componentDidMount . Did mount will unnecessarily wait for the first render pass before launching the request. It'll be fractionally quicker in will mount.

Answer 2

got the solution data was empty because the api request was get method and passing some data, then changed to post method and all working fine

Answer 3

i have figure out that your case syntax is wrong it should be like this inside reducer switch

case "FETCHSUCCESS":

second you have to warp your component with connect and then get the state from your reducer.

to view you result you need to directly interact with reducer for data rather than using data from component state.

and use show loader inside component until API calls end