Question

我正在尝试对我在NodeJS中编写的后端进行简单的提取调用。虽然，我很难让抓取工作。我在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对象，该对象包含值＆＃34; success＆＃34;，这是真的。我的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 Fortforwarding UDP / TCP修复了这个问题，以及使用我的IPv4地址而不是localhost。

React Native fetch不能与redux一起使用？

1 个答案: