CODEWITHSUNDEEP
javascriptreactjsredux
Martin Nordström
Martin Nordström

Reputation: 6025

Loading screen when fetching data via Redux

I want to start adding loading screens to my components when I'm fetching data from my API. I've made some research and tried my best, but my loading screen never disappears and I don't know why. I've tried to solve this for a while now hehe.

Action:

const setDoors = data => {
  return {
    type: 'SET_DOORS',
    payload: {
      setDoors: data
    }
  }
}

...

export const fetchDoors = () => async (dispatch, getState) => {
  try {
    dispatch({ type: 'FETCH_DOORS' })
    const doors = await axios.get(`${settings.hostname}/locks`).data
    dispatch(setDoors(doors))

Reducer:

const initialState = {
  isLoading: false
}

export const fetchDoors = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_DOORS':
      return { ...state, isLoading: true }

    case 'FETCH_DOORS_SUCCESS':
      return { ...state, doors: action.payload.setDoors, isLoading: false }

In my component I only have this:

if (this.props.isLoading) return <div>laddar</div>

And when I log it I'm always getting true:

const mapStateToProps = state => {
  console.log(state.fetchDoors.isLoading) // Always true
  return {
    doors: state.fetchDoors.doors,
    isLoading: state.fetchDoors.isLoading,
    controllers: state.fetchDoors.controllers
  }
}

Console

enter image description here

Upvotes: 3

Views: 2108

Answers (2)

jonahe
jonahe

Reputation: 5000

You have a tricky small error in that you are not awaiting what you think you are awaiting.

Compare your

const doors = await axios.get(`${settings.hostname}/locks`).data

to

const doors = (await axios.get(`${settings.hostname}/locks`)).data

In the first case you are actually awaiting some undefined property .data on the promise (not the awaited result) that gets returned from the axios call.

In the second case, which should work, you're awaiting the promise, and then you get the .data property of the awaited promise.

I reproduced the issue in the small snippet below. Notice how fast the first result pops up, even though the promise is supposed to resolve after 4 seconds.

const getDataPromise = () => new Promise(resolve => setTimeout(() => resolve({data: 42}), 4000));

(async function e() {
  const data = await getDataPromise().data;
  
  console.log("wrong:   await getDataPromise().data = ", data)

})();

(async function e() {
  const data = (await getDataPromise()).data;
  
  console.log("right:   (await getDataPromise()).data = ", data)

})();

Upvotes: 2

Max Millington
Max Millington

Reputation: 4498

dispatch(setDoors(doors)) should be dispatch(fetchDoorsSucess(doors)) and should only be called upon a sucessfull axios call.

 const fetchDoorsSuccess = data => {
   return {
     type: 'FETCH_DOORS_SUCCESS',
     payload: {
       setDoors: data
     }
   }
 }

In general, I have three standard actions for each ajax call, a REQUEST, REQUEST_SUCCESS, and REQUEST_ERROR. In the reducer for REQUEST, you should set isLoading:true, for the other two, you should set isLoading: false along with reducing any data you got back from the server.

Upvotes: 1

Related Questions