Quiero agregar el clima por geolocalización en mi aplicación React+Redux. Descubrí que puedo obtener la geolocalización mediante este método JS navigator.geolocation.getCurrentPosition(success, error, [options]) . Quiero enviar eso a mi Redux weatherSlice, pero este método devuelve indefinido de forma predeterminada, por lo que no puedo enviarlo mediante createAsyncThunk.
import { createAsyncThunk, createSlice } from "@reduxjs/toolkit"; export const getGeolocation = createAsyncThunk( "weather/getGeolocation", async () => { if (navigator.geolocation) { /*return */ navigator.geolocation.getCurrentPosition((position) => { // ^^^^^^^^^^ I suggest that I should add return here , // but it's still undefined, because this method return undefined anyway const { latitude, longitude } = position.coords; return { latitude, longitude }; // I understand that this won't work }); } } );¿Cuál es la mejor manera de resolver este problema?
El método getCurrentPosition probablemente solo funcione en https o localhost.
La función payloadCreator de crateAsyncThunk debe devolver una Promesa, puede convertir una función de tipo de devolución de llamada en una promesa .
En tu código se vería así:
export const getGeolocation = createAsyncThunk( 'weather/getGeolocation', () => { // this is the payload creator function //return a promise return new Promise((resolve, reject) => !navigator.geolocation ? reject('Geolocation not supported') : navigator.geolocation.getCurrentPosition( ({coords:{ latitude, longitude }}) => resolve({ latitude, longitude }), reject //reject promise when there is an error ) ); } );