im trying to get user location, and then use the location to return relevant data for is location.

but in the second function i get that the location is null (when i console.log(location) it prints the right location, at the second print, the first print is null) it seems like the second function is not waiting until the first one is done.

Here is some code:

from the ponent

    const location = useSelector(state => state.locationReducer.location);
    useEffect(()=> {
        (async () => {
            await getLocation();

            // here i'm using the location from the first function
            await getInfo(location);
        })()
    }, []);


    const getLocation = async() => {
        try {
            await dispatch(getLocation());
            console.log(location);
        } catch (err) {
            // TODO HANDLE ERROR;
            console.log('Err:', err);
        }
    }

in the action

export const getLocation = locationName => {
    return async dispatch => {
        try {
            const location = **await** locationService.getLocation(locationName);
            **await** dispatch(setLocation(location));
        } catch (err) {
            throw err;
        };
    };
};

const setLocation = location => {
    return {
        type: types.SET_LOCATION,
        location
    };
};

in service

async function getLocation(locationName) {
    try {]
        return **await** axios.get(`${url}/${locationName}`);
    } catch (err) {
        throw err
    };
};

im trying to get user location, and then use the location to return relevant data for is location.

but in the second function i get that the location is null (when i console.log(location) it prints the right location, at the second print, the first print is null) it seems like the second function is not waiting until the first one is done.

Here is some code:

from the ponent

    const location = useSelector(state => state.locationReducer.location);
    useEffect(()=> {
        (async () => {
            await getLocation();

            // here i'm using the location from the first function
            await getInfo(location);
        })()
    }, []);


    const getLocation = async() => {
        try {
            await dispatch(getLocation());
            console.log(location);
        } catch (err) {
            // TODO HANDLE ERROR;
            console.log('Err:', err);
        }
    }

in the action

export const getLocation = locationName => {
    return async dispatch => {
        try {
            const location = **await** locationService.getLocation(locationName);
            **await** dispatch(setLocation(location));
        } catch (err) {
            throw err;
        };
    };
};

const setLocation = location => {
    return {
        type: types.SET_LOCATION,
        location
    };
};

in service

async function getLocation(locationName) {
    try {]
        return **await** axios.get(`${url}/${locationName}`);
    } catch (err) {
        throw err
    };
};

• javascript
• reactjs
• redux
• react-redux

Share Improve this question Follow edited May 19, 2020 at 6:07 Circus4 asked May 19, 2020 at 5:55 Circus4Circus4 32122 gold badges66 silver badges1313 bronze badges 2

• In your ponent did you tried to use dispatch? There is a useDispatch hook from witch you can get a dispatch instance and in the useEffect your actions need to be wrapped in a dispatch call like: await dispatch(getLocation()); – Martin Commented May 19, 2020 at 6:01
• i am using dispatch, here is more from the ponent const getLocation = async() => { try { await dispatch(getLocation()); console.log(location); } catch (err) { console.log('Err:', err); } } – Circus4 Commented May 19, 2020 at 6:06

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

The location value from the selector won't update after your first function has run and before the second function, so there you'll see the old value in your location variable.

You might need to return your location value from the reducer:

export const getLocation = locationName => {
    return async dispatch => {
        try {
            const location = await locationService.getLocation(locationName);
            await dispatch(setLocation(location));

            return location;
        } catch (err) {
            throw err;
        };
    };
};

And use the returned location in your useEffect:

    useEffect(()=> {
        (async () => {
            const location = await getLocation();

            // here i'm using the location from the first function
            await getInfo(location);
        })()
    }, []);

Or another possibility, to have an another effect, wich depends son the location value:

    const location = useSelector(state => state.locationReducer.location);
    useEffect(()=> {
        getLocation();
    }, []);

    useEffect(()=> {
      if(location) {
        getInfo(location);
      }
    }, [location]);

And this would run every time location changes, and location has some value.

As Per Dan Abramov-

useEffect(() => {
  async function fetchMyAPI() {
    let url = 'http://something';
    let config = {};
    const response = await myFetch(url);
    console.log(response);
  }  
  fetchMyAPI();
}, []);

Here is the link for reference - https://github./facebook/react/issues/14326#issuement-441680293

Or You can simply use .then()

  useEffect(() => {
    asyncCall().then(setVal);
  });

Article on how to fetch - https://www.robinwieruch.de/react-hooks-fetch-data