Reaction redux const Funktion erreicht wird, aber dann sofort zurück

Question

Anfänger bei diesem.

Ich habe Code hinzugefügt, der an die API gehen und ein Datenobjekt abrufen sollte, das ich später in den lokalen Speicher laden kann. Ich habe es hinzugefügt und es wird erreicht, aber dann kehrt es sofort zurück, bevor irgendeine der Funktionen ausgeführt wird.

Hier ist die gesamte Datei. Ich habe die Aktionen mit dem Reduzierer für den Moment, aber verschiebe die Aktionen später in eine andere Datei.

import { fetch, addTask } from 'domain-task' 
import { saveJwt, clearJwt } from '../auth/jwt' 
import { handleErrors } from '../utils/http' 
//import {requestSelectData} from '../selectData/reducer' 

const REQUEST_LOGIN_TOKEN = 'REQUEST_LOGIN_TOKEN' 
const RECEIVE_LOGIN_TOKEN = 'RECEIVE_LOGIN_TOKEN' 
const ERROR_LOGIN_TOKEN = 'ERROR_LOGIN_TOKEN' 

const REQUEST_SELECT_DATA = 'REQUEST_SELECT_DATA' 
const RECEIVE_SELECT_DATA = 'RECEIVE_SELECT_DATA' 
const ERROR_SELECT_DATA = 'ERROR_SELECT_DATA' 

const REQUEST_USER = 'REQUEST_USER' 
const RECEIVE_USER = 'RECEIVE_USER' 
const ERROR_USER = 'ERROR_USER' 

// ******************* action 
export const requestLoginToken = (username, password) => 
    (dispatch, getState) => { 
    dispatch({ type: REQUEST_LOGIN_TOKEN, payload: username }) 

    const payload = { 
     userName: username, 
     password: password, 
    } 

    const task = fetch('/api/jwt', { 
     method: 'POST', 
     body: JSON.stringify(payload), 
     headers: { 
     'Content-Type': 'application/json;charset=UTF-8' 
     }, 
    }) 
     .then(handleErrors) 
     .then(response => response.json()) 
     .then(data => { 
     dispatch({ type: RECEIVE_LOGIN_TOKEN, payload: data }) 
     saveJwt(data) 

     selectData() 

     }) 
     .catch(error => { 
     clearJwt() 
     dispatch({ type: ERROR_LOGIN_TOKEN, payload: error.message }) 
     }) 
    addTask(task) 
    return task 
    } 

const selectData =() => 
    (dispatch, getState) => { 
    dispatch({ type: REQUEST_SELECT_DATA }) 

    const token = jwt.access_token 
    const headers = new Headers({ 
    'Authorization': `Bearer ${token}` 
    }) 
    const selectData = fetch('/api/SelectData/SelectData', { 
    method: 'GET', 
    headers, 
    }) 
    .then(handleErrors) 
    .then(response => response.json()) 
    .then(data => { 
     dispatch({ type: RECEIVE_SELECT_DATA, payload: data }) 
     .catch(error => { 
      clearJwt() 
      dispatch({ type: ERROR_SELECT_DATA, payload: error.message }) 
     }) 
    }) 
} 

export const requestUser = (jwt) => 
    (dispatch, getState) => { 
    dispatch({ type: REQUEST_USER, payload: jwt }) 

    const token = jwt.access_token 
    const headers = new Headers({ 
     'Authorization': `Bearer ${token}` 
    }) 
    const task = fetch('/api/jwt/user', { 
     method: 'GET', 
     headers, 
    }) 
     .then(handleErrors) 
     .then(response => response.json()) 
     .then(data => { 
     dispatch({ type: RECEIVE_USER, payload: data }) 
     }) 
     .catch(error => { 
     clearJwt() 
     dispatch({ type: ERROR_USER, payload: error.message }) 
     }) 
    addTask(task) 
    return task 
    } 

// ******************* reducer 
const initialState = { 
    isLoading: false, 
    isAuthorised: false, 
    username: null, 
    jwt: null, 
    locations: null, 
    states: null, 
    CompanyStateShortName: null, 
    error: null, 
} 

export default (state = initialState, action) => { 
    switch (action.type) { 
    case REQUEST_LOGIN_TOKEN: 
     return { 
     ...state, 
     isLoading: true, 
     isAuthorised: false, 
     username: action.payload, 
     jwt: null, 
     error: null, 
     } 
    case RECEIVE_LOGIN_TOKEN: 
     return { 
     ...state, 
     isLoading: false, 
     isAuthorised: true, 
     jwt: action.payload, 
     error: null, 
     } 
    case ERROR_LOGIN_TOKEN: 
     return { 
     ...state, 
     isLoading: false, 
     isAuthorised: false, 
     username: null, 
     jwt: null, 
     error: action.payload, 
     } 

    case REQUEST_SELECT_DATA: 
     return { 
     ...state, 
     isLoading: true, 
     isAuthorised: false, 
     jwt: action.payload, 
     locations: null, 
     states: null, 
     CompanyStateShortName: null, 
     error: null, 
     } 

    case RECEIVE_SELECT_DATA: 
     return { 
     ...state, 
     isLoading: false, 
     isAuthorised: true, 
     locations: action.payload.locations, 
     states: action.payload.states, 
     CompanyStateShortName: action.payload.CompanyStateShortName 
     } 
    case ERROR_SELECT_DATA: 
     return { 
     ...state, 
     isLoading: false, 
     locations: null, 
     states: null, 
     CompanyStateShortName: null, 
     error: action.payload, 
     } 

    case REQUEST_USER: 
     return { 
     ...state, 
     isLoading: true, 
     isAuthorised: false, 
     jwt: action.payload, 
     username: null, 
     error: null, 
     } 
    case RECEIVE_USER: 
     return { 
     ...state, 
     isLoading: false, 
     isAuthorised: true, 
     username: action.payload.username, 
     error: null, 
     } 
    case ERROR_USER: 
     return { 
     ...state, 
     isLoading: false, 
     isAuthorised: false, 
     username: null, 
     jwt: null, 
     error: action.payload, 
     } 

    default: 
     return state 
    } 
} 

Ich habe die const "SelectData" hinzugefügt.

const selectData =() => 
    (dispatch, getState) => { 
    dispatch({ type: REQUEST_SELECT_DATA }) 

    const token = jwt.access_token 
    const headers = new Headers({ 
    'Authorization': `Bearer ${token}` 
    }) 
    const selectData = fetch('/api/SelectData/SelectData', { 
    method: 'GET', 
    headers, 
    }) 
    .then(handleErrors) 
    .then(response => response.json()) 
    .then(data => { 
     dispatch({ type: RECEIVE_SELECT_DATA, payload: data }) 
     .catch(error => { 
      clearJwt() 
      dispatch({ type: ERROR_SELECT_DATA, payload: error.message }) 
     }) 
    }) 
} 

Es kommt einfach zu dieser Zeile und kehrt zurück und ich weiß nicht warum?

const selectData =() => 
    (dispatch, getState) => { 
    dispatch({ type: REQUEST_SELECT_DATA }) 

Warum geht es nicht durch die gesamte Funktion? ..und ich bekomme keine Fehler.

Answer 1

fetch ist asynchron. Es startet den Prozess und kehrt dann sofort zurück. Zu einem bestimmten Zeitpunkt in der Zukunft wenn und wenn der Netzwerkzugriff erfolgreich ist, wird der Code in der then() aufgerufen werden.

Meine Vermutung, der Zugriff ist fehlgeschlagen, so dass Code nie ausgeführt wird. Überprüfen Sie Ihren Server oder das Netzwerkprotokoll des Browsers.

Auch warum auf der Erde den Rückgabewert des Abrufs zu einer Konstante mit dem gleichen Namen wie die umschließende Funktion zuweisen? Es passiert nichts, aber es wäre viel besser.