javascript - Loading screen when fetching data via Redux -

i want start adding loading screens components when i'm fetching data api. i've made research , tried best, loading screen never disappears , don't know why. i've tried solve while 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 component have this:

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

and when log i'm getting true:

const mapstatetoprops = state => {   console.log(state.fetchdoors.isloading) // true   return {     doors: state.fetchdoors.doors,     isloading: state.fetchdoors.isloading,     controllers: state.fetchdoors.controllers   } } 

console

you have tricky small error in not awaiting think awaiting.

compare your

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

to

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

in first case awaiting undefined property .data on promise (not awaited result) gets returned axios call.

in second case, should work, you're awaiting promise, , .data property of awaited promise.

i reproduced issue in small snippet below. notice how fast first result pops up, though promise supposed 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)    })();