使用 React Native + Redux 获取数据不起作用

Question

I am building my first React Native app and use Redux for the data flow inside my app.

I want to load some data from my Parse backend and display it on a ListView . My only issues at the moment is that for some reason, the request that I create using fetch() for some reason isn't actually fired. I went through the documentation and examples in the Redux docs and also read this really nice blog post . They essentially do what I am trying to achieve, but I don't know where my implementation differs from their code samples.

Here is what I have setup at the moment (shortened to show only relevant parts):

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

When I am calling dispatch( fetchOrganizations() ) like this, I do see the logs until Actions - return promise , but it doesn't seem to actually to fire off the request. I'm not really sure how how I can further debug this or what resources to consult that help me solve this issue.

Answer 1

I'm assuming that Redux is expecting a Promise rather than a function.. Is that true?

If so, I think your return function may not be working.

You have a new line after your return, and it's possible JavaScript is (helpfully) inserting a semicolon there.

See here: Why doesn't a Javascript return statement work when the return value is on a new line?