reactjs - React Native fetch 不适用于 redux？

Question

我正在尝试对我自己用 NodeJS 编写的后端进行简单的获取调用。尽管如此，我很难让获取工作正常进行。我在 React Native 中使用 Redux Thunk 和 Redux 来整理状态和 props，以便制作一个 self 导航的登录/注册 View 。我的 Action 看起来像这样:

actions.js

import {
    LOGIN,
    LOGIN_SUCCESS,
    LOGIN_FAILED
} from '../constants/constants'

export function loginAPI() {
    return (dispatch) => {
      dispatch(userLogin())
      fetch('http://localhost:3000/users/')
      .then(data => data.json())
      .then(json => {
        console.log('json:', json)
        dispatch(userLoginSuccess(json.success))
      })
      .catch(err => dispatch(userLoginFailed(err)))
    }
  }

function userLogin() {
    return {
        type: LOGIN,
    }
}

function userLoginSuccess(token) {
    return {
        type: LOGIN_SUCCESS,
        token,
    }
}

function userLoginFailed() {
    return {
        type: LOGIN_FAILED,
    }
}

user.js( reducer )

import {
    LOGIN,
    LOGIN_SUCCESS,
    LOGIN_FAILED,
    } from '../constants/constants'

const initialState = {
    token: "",
    isFetching: false,
    error: false
}

export default function reducers(state = initialState, action){
    switch (action.type) {
        case LOGIN:
          return {
            ...state,
            isFetching: true,
            token: ""
          }
        case LOGIN_SUCCESS:
          return {
            ...state,
            isFetching: false,
            token: action.token
          }
        case LOGIN_FAILED:
          return {
            ...state,
            isFetching: false,
            error: true
          }
        default:
          return state
      }
}

最后，这是我的渲染页面。

Login.js

import React from 'react'
import { TouchableHighlight, View, Text, StyleSheet } from 'react-native'

import { connect } from 'react-redux'
import { loginAPI } from '../actions/actions'

let styles

const Login = (props) => {
  const {
    container,
    text,
    button,
    buttonText
  } = styles

  const { token, isFetching } = props.user;
  console.log('Token: ', props.token);

  return (
    <View style={container}>
      <Text style={text}>Redux Example</Text>
      <TouchableHighlight style={button} onPress={() => props.loginAPI()}>
        <Text style={buttonText}>Login</Text>
      </TouchableHighlight>
      {
        isFetching && <Text>Loading</Text>
      }
      {
        token ? (<Text>Name: {token}</Text>) : null
      }
    </View>
  )
}

styles = StyleSheet.create({
  container: {
    marginTop: 100,
    paddingLeft: 20,
    paddingRight: 20
  },
  text: {
    textAlign: 'center'
  },
  button: {
    height: 60,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#0b7eff'
  },
  buttonText: {
    color: 'white'
  }
})

function mapStateToProps (state) {
  return {
    user: state.user
  }
}

function mapDispatchToProps (dispatch) {
  return {
    loginAPI: () => dispatch(loginAPI())
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Login)

这里的问题是提取调用似乎永远不会到达后端。我在后端有一个日志来告知何时调用 API，但它从未显示出来。调试、检查状态显示成功( token )为空，这是可以理解的，因为从未进行过调用。到用户的路由返回一个 JSON 对象，其中包含值“success”，该值是 true。为什么我的 LoginAPI 无法获取？

最后这是我的 configStore

configStore.js

import { createStore, applyMiddleware } from 'redux'
import app from '../reducers'
import thunk from 'redux-thunk'

export default function configureStore() {
  let store = createStore(app, applyMiddleware(thunk))
  return store
}

Answer 1

<从 2995 - 3005 进行端口转发，UDP/TCP 都解决了该问题，并且使用我的 IPv4 地址而不是本地主机。