Verwenden Sie getState, um auf den Schlüssel im Redux-Status für API-Aufruf zuzugreifen

Question

Ich bin ein wenig neu zu verwenden thunk getState Ich habe sogar versucht, console.log die Methode und nichts zu bekommen. Im Zustand sehe ich, dass loginReducer sie Schlüsseleigenschaft hat, die ich API-Anrufe machen muss. status(pin): true key(pin): "Ls1d0QUIM-r6q1Nb1UsYvSzRoaOrABDdWojgZnDaQyM"

Hier habe ich einen Dienst:

import axios from 'axios' 
import {thunk, getState} from 'redux-thunk' 
import MapConfig from '../components/map/map-config' 

const origin = 'https://us.k.com/' 



class KService { 

    getNorthAmericaTimes() { 
    return (dispatch, getState) => { 
     const key = getState().key 
     console.log('This is time key,', key) 
     if (key) { 
     dispatch(axios.get(`${origin}k51/api/datasets/k51_northamerica?key=${key}`)) 
     } 
    } 
    // const url = `${origin}k51/api/datasets/k51_northamerica?key=${urlKey}` 
    // return axios.get(url) 
    } 
} 

export default new K51Service() 

jedoch in meiner entsprechenden Aktion, die ich bekommen, dass Uncaught TypeError: _kService2.default.getNorthAmericaTimes(...).then is not a function

Dies ist, was die Action-Funktion wie folgt aussieht:

export function getKNorthAmericaTime(dispatch) { 
    KService.getNorthAmericaTimes().then((response) => { 
    const northAmericaTimes = response.data[0] 
    dispatch({ 
     type: ActionTypes.SET_NORTH_AMERICA_TIMES, 
     northAmericaTimes 
    }) 
    }) 
} 

Ich bin angenommen, dass es wahrscheinlich damit zu tun hat, dass der if-Block nicht ausgeführt wird.

Answer 1

Sie sollten Ihre axios.get()-Methode zu Ihrem Aktionsersteller verschieben und das Versprechen an redux thunk übergeben. Wenn das Versprechen dann gelöst ist, senden Sie die Aktion mit den Antwortdaten, damit sie vom Reducer in den App-Status verarbeitet werden kann.

Aktionen

import axios from "axios"; 

export function fetchData() { 
    return (dispatch, getState) => { 
    const key = getState().key; 
    const request = axios.get();// use your request code here 
    request.then(({ response}) => { 
     const northAmericaTimes = response.data[0] 
     dispatch({ type: ActionTypes.SET_NORTH_AMERICA_TIMES, payload: northAmericaTimes}); 
    }); 
    }; 
} 

Hier ist ein sehr einfaches Beispiel für axios mit redux-Thunk mit:

https://codesandbox.io/s/z9P0mwny

EDIT

Sorry, ich habe ganz vergessen, dass Sie müssen zu gehen der Staat, bevor Sie die Anfrage stellen.

Wie Sie sehen, gehen Sie in Ihrer Funktion zum Status, holen Sie sich den Schlüssel, stellen Sie die Anfrage und wenn das Versprechen gelöst ist, versenden Sie die Aktion mit den Antwortdaten. Ich habe das Live-Beispiel aktualisiert, damit Sie es sehen können. Ich brauche verwenden getState(). Schlüssel und speichert, dass auf eine Variable für die URL

Wieder sorry ...