Question 34813 in React native Question posted in
The official React Native documentation can be found here.

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

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":{
        
   }
}
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    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


  2. 0

    Without seeing the full component definition I can’t 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. It’s 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 doesn’t even fire is your render already blew up because it couldn’t 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 didn’t configure them.

    Incidentally, 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.

    Login or Signup to reply.
  3. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search