Geolocation through React-Redux

Question

저는 redux 및 반응 수명주기 방법에 대해 더 잘 이해하려고합니다.

필자는 구성 요소에서 propx 기능을 사용하여 redux에서 함수를 호출했습니다. redux에서 위치를 얻고 초기 상태를 설정하고 호출이 이루어질 때 업데이트하도록 위치를 호출합니다. 나는 position을 얻을 수 있지만, 내가 redux를 통해 시도한 것에 상관없이, 나의 좌표 (초기 상태)는 여전히 정의되지 않은 것으로 나온다. 나는 componentDidMount 함수에 .then()을 시도하고 로컬로 상태를 설정했다. 그러나 나는이 기능을 redux와 함께 사용하여 더 잘 이해하려고 노력하고 싶습니다. 내 이해는 초기 상태가있는 한 업데이트하는 데 문제가 없어야한다는 것입니다. 하지만 내 문제는 내 행동 어딘가에있을 거라 생각해. 페이로드. GET_LOCATION에 대한 스위치 케이스에 아무 것도 기록하지 않기 때문입니다. 한 가지주의 할 점은 내 콘솔에 노란색 경고가 나타납니다. '[위반] 사용자 제스처에 대한 응답으로 Geolocation 정보 만 요청하십시오.' 이것이 영향을 미치는지 확실하지 않습니다. 어쨌든, 어떤 제안이라도 대단히 감사 할 것입니다. 나는 redux를 통해 geolocation에 대한 좋은 해결책을 찾기 위해 높거나 낮게 조사했습니다.

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 
      } 
     ) 

Answer 1

geolocation.getCurrentPosition가 비동기, 그래서 페이로드에 넣어 아무것도 반환 아니에요.

비동기로 전달하려면 redux-thunk을 사용해야합니다. 지침을 따라 사용하지 않았다면 설정하고 다음과 같이 작업 작성자를 변경할 수 있어야합니다.

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