javascript - React redux const 函数已到达但立即返回

Question

初学者。

我添加了应该转到 API 并检索数据对象的代码，以便稍后将其加载到本地存储中。我已添加它并且已达到它，但随后它在执行任何功能之前立即返回。

这是整个文件。我暂时有 reducer 的操作，但稍后会将操作移动到另一个文件。

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

我添加了 const“selectData”。

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

它只是到达这一行并返回，我不知道为什么？

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

为什么它不遍历整个函数？ ..我没有收到任何错误。

Answer 1

fetch 是异步的。它启动该进程，然后立即返回。在未来的某个时刻如果网络访问成功，then()中的代码将被调用。

我的猜测是，访问失败，因此代码永远不会运行。检查您的服务器或浏览器的网络日志。

此外，为什么要将 fetch 的返回值分配给与封闭函数同名的常量？它碰巧不会破坏任何东西，但简单地返回它会更好。