반응 저감을 통한 지리 위치

반응 저감을 통한 지리 위치

나는 환원법과 반응 라이프사이클 방법에 대해 더 잘 이해하려고 노력하고 있다.

컴포넌트 did mount에 Redex 기능을 호출하는 프로펠러 기능이 있다.Reducx에서 나는 위치를 얻기 위해 전화하고 초기 상태를 설정하고 통화할 때 업데이트한다.나는 그 자리를 얻을 수 있지만, 내가 무엇을 시도했든 간에, 나의 조정(초기 상태)은 여전히 정의되지 않은 상태로 나온다.컴포넌트DidMount 함수에 .didMount 함수를 로컬로 설정해 봤더니 효과가 있었다.하지만 나는 이 기능을 환원제와 함께 사용하여 그것을 더 잘 이해하려고 한다.초기 상태가 있는 한 업데이트하는 데 문제가 없어야 한다는 것이 나의 이해다.하지만 나는 내 문제가 내 행동.payload와 어딘가에 있을 수 있다고 느낀다.GET_LOCATION의 스위치 케이스에 아무것도 기록하지 않기 때문이다.한가지 주목할 점은, 내 콘솔에 '[위반] 사용자 제스처에 대한 응답으로 지리 위치 정보만 요청하라'는 노란색 경고를 받는다.나는 이것이 어떤 것에 영향을 미치는지 확신할 수 없다.어쨌든, 어떤 제안이라도 감사할 것이다.나는 환원제를 통한 지리 위치의 좋은 해결책을 찾으려고 여기저기 찾아보았다.암호는 다음과 같다.

const initialState = {
    coords: { }
};


export function getLocation() {
    const geolocation = navigator.geolocation;
          return {
             type: GET_LOCATION,
             payload: geolocation.getCurrentPosition((position) => {
                 console.log(position.coords)
                 return position
             })
         }

};

스위치 문:

case GET_LOCATION:
    console.log(GET_LOCATION)
        return Object.assign({},
            state,
            {
                coords: action.payload
            }
        )

geolocation.getCurrentPosition비동기적이어서 페이로드에 넣을 건 아무것도 돌려주지 않아

비동기적으로 발송하려면 환원 스컹크를 사용해야 한다.사용 경험이 없는 경우 지침에 따라 설정하십시오. 그러면 다음과 같이 작업 작성자를 변경할 수 있어야 한다.

export function getLocation() {
    return dispatch => {
        const geolocation = navigator.geolocation;
        geolocation.getCurrentPosition((position) => {
            console.log(position.coords);
            dispatch({
                type: GET_LOCATION,
                payload: position
            });
        });
};

유사한 문제가 있었지만, 약속 성공 사례 내에 좌표를 기록할 수 있었지만, 상태를 업데이트할 수 없었다.약속을 액션 크리에이터의 함수에 내포해야 한다.이를 통해 해결 케이스 내에서 디스패치 기능을 호출하여 데이터를 비동기식으로 환원기에 전송할 수 있다.아래를 참조하십시오.

export const location = () => {
    return function (dispatch) {
        return new Promise((resolve, reject) => {
            if (!navigator.geolocation) {
                reject(new Error('Not Supported'));
            }
            navigator.geolocation.getCurrentPosition((position) => {
                var action = {
                    type: FETCH_LOCATION,
                    payload: {
                        lat: position.coords.latitude,
                        long: position.coords.longitude,
                        time: position.timestamp
                    }
                }
                resolve(position);
                dispatch(action)
            }, () => {
                reject(new Error('Permission denied'));
            });
        });
    }
};

참조URL: https://stackoverflow.com/questions/47615801/geolocation-through-react-redux