使用React Native + Redux进行数据提取无法正常工作

时间:2016-03-15 15:38:45

标签: reactjs promise react-native fetch redux

我正在构建我的第一个React Native应用程序并使用Redux来处理我的应用程序内的数据流。

我想从Parse后端加载一些数据并将其显示在ListView上。我目前唯一的问题是,出于某种原因,我出于某种原因使用fetch()创建的请求实际上并没有被触发。我浏览了Redux docs中的文档和示例,并阅读了这篇非常好的blog post。他们基本上做了我想要实现的目标,但我不知道我的实现与他们的代码示例有何不同。

这是我目前设置的内容(缩写为仅显示相关部分):

OverviewRootComponent.js

class OverviewRootComponent extends Component {
  componentDidMount() {
    const { dispatch } = this.props
    dispatch( fetchOrganizations() )
  }
}

Actions.js

export const fetchOrganizations = () => {
  console.log('Actions - fetchOrganizations');
  return (dispatch) => {
    console.log('Actions - return promise');
    return
      fetch('https://api.parse.com/1/classes/Organization', {
        method: 'GET',
        headers: {
          'X-Parse-Application-Id': 'xxx',
          'X-Parse-REST-API-Key': 'xxx',
        }
      })
      .then( (response) => {
        console.log('fetchOrganizations - did receive response: ', response)
        response.text()
      })
      .then( (responseText) => {
        console.log('fetchOrganizations - received response, now dispatch: ', responseText);
        dispatch( receiveOrganizations(responseText) )
      })
      .catch( (error) => {
        console.warn(error)
      })
  }
}

当我这样调用dispatch( fetchOrganizations() )时,我确实会看到Actions - return promise之前的日志,但实际上似乎没有触发请求。我不确定如何进一步调试这个或者要咨询哪些资源来帮助我解决这个问题。

1 个答案:

答案 0 :(得分:2)

我假设Redux期待一个Promise而不是一个函数..这是真的吗?

如果是这样,我认为您的返回功能可能无效。

您返回后会有一个新行,并且可能的JavaScript(有帮助)在那里插入分号。

见这里:Why doesn't a Javascript return statement work when the return value is on a new line?