질문 있습니다.

React로 NodeBird SNS 만들기

해결된 질문

작성

171

const {mainCardPics, myLocation} = useSelector(state => state.user);

const getLocation = () => {
    if (navigator.geolocation) { // GPS를 지원하면
        navigator.geolocation.getCurrentPosition((position) => {
            dispatch({
                type: MY_LOCATION_REQUEST,
                data: {
                    lat: position.coords.latitude,
                    long: position.coords.longitude,
                },
            });
            dispatch({
                type: GET_POSTS_REQUEST,
                data: {
                    dong: myLocation.dong,
                },
            });
        }, function (error) {
            console.error(error);
        }, {
            enableHighAccuracy: false,
            maximumAge: 0,
            timeout: Infinity
        });
    } else {
        alert('GPS를 지원하지 않습니다');
    }
};

현재 위치의 위도 경도를 받아서 카카오맵api 를 연결해 주었는데요(MY_LOCATION_REQUEST). 그 다음 바로 GET_POSTS_REQUEST 를 통해서 카카오맵을 통해서 받은 도,시,군,동 으로 포스트를 불러오는 액션입니다. 하지만 dispatch 액션을 위와 같이 연속적으로 써주면 카카오 맵 api 의 결과 값을 받기도 전에 다음 액션이 취해지더라구요. 그러면 카카오 맵 api 의 결과값을 받는거를 기다려야 되는데 async/await 을 쓸수가 없더라구요. 이거에 대한 솔류션이 있을까요?

react javascript

답변 3

제로초(조현영)

지식공유자

아뇨 MY_LOCATION_SUCCESS 뒤에 GET_POSTS_REQUEST를 두셔야 연달이 이어서 실행됩니다.

kok

질문자

지금 강의 복습하면서 하는거라서 redux-saga 를 현재 쓰고있는 상태입니다.

function myLocationAPI(latLong) {
    return axios.get(`https://dapi.kakao.com/v2/local/geo/coord2address.json?x=${latLong.long}&y=${latLong.lat}`, {
        headers: {
            "Authorization": "test",
        },
    });
}

function* myLocation(action) {
    try {
        const result = yield call(myLocationAPI, action.data);
        yield put({
            type: MY_LOCATION_SUCCESS,
            data: result.data.documents[0]
        });
    } catch (e) {
        yield put({
            type: MY_LOCATION_FAILURE,
            error: e,
        });
    }
}

function* watchMyLocation() {
    yield takeLatest(MY_LOCATION_REQUEST, myLocation);
}

const {mainCardPics, myLocation} = useSelector(state => state.user);

dispatch({
    type: MY_LOCATION_REQUEST,
    data: {
        lat: position.coords.latitude,
        long: position.coords.longitude,
    },
});
console.log("dong : ",myLocation);
dispatch({
    type: GET_POSTS_REQUEST,
    data: {
        dong: myLocation.dong,
    },
});

dispatch 액션이 끝나면 myLocation 에 결과 값이 담겨야 되지 않나요? 근데 위와 같이 하면 빈 객체가 콘솔에 나와서요

제로초(조현영)

지식공유자

이 때 redux-thunk나 redux-saga를 쓰는 겁니다. 강좌 참고해주세요~

인프런 커뮤니티 질문&답변

질문 있습니다.