React Native fetch 不适用于 redux？

Posted 2023-02-22

【中文标题】React Native fetch 不适用于 redux？

【英文标题】：React Native fetch won't work with redux?

【发布时间】：2018-07-20 21:46:59

【问题描述】：

我正在尝试对我自己在 NodeJS 中编写的后端进行简单的 fetch 调用。虽然，我很难让获取工作。我在 React Native 中使用 Redux Thunk 和 Redux 来整理状态和道具，以便创建一个自我导航的登录/注册视图。我的操作如下所示：

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)

这里的问题是 fetch 调用似乎永远不会到达后端。我在后端有一个日志来告诉何时调用 API，但它永远不会出现。调试，检查状态显示成功（令牌）为空，这是可以理解的，因为从未进行过调用。到用户的路由返回一个 JSON 对象，其中包含一个值“成功”，这是真的。为什么我的 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

【问题讨论】：

您的 API 上有 GET /users 吗？通常，大多数开发人员使用用户名和密码在 API 上进行 POST 并获取令牌。你似乎做了一个 GET。

是的，这是我做的一个测试。其余的需要散列信息才能从中获取令牌，因此认为这样做会更容易。它返回 success: true

会不会是因为服务器是本地托管的？使用 fetch 时是否有一些限制，只能调用 https DNS？

是的，可能是因为它是本地主机。 localhost 可能指向模拟器或设备本身。如果您在同一网络上，可以尝试使用私有 IP。

已修复。 Fortforwarding 2995 - 3005，并在进行 post 调用时将内容更改为 JSON 修复它。

【参考方案1】：

从 2995 到 3005 的 UDP / TCP 都解决了这个问题，并使用我的 IPv4 地址而不是 localhost。