Question

我有一个从我的React组件调用的动作创建器：

// ...
import { connect } from 'react-redux';
// ...
import { submitProfile } from '../actions/index';

// ...

  onSubmit() {
    const profile = {
      name: this.state.name
      // ...
    };

    this.props.submitProfile(profile)
      .then(() => { // I keep getting an error here saying cannot read property 'then' of undefined...
        console.log("Profile submitted. Redirecting to another scene.");
        this.props.navigator.push({ ... });
      });
  }

export default connect(mapStateToProps, { submitProfile })(MyComponent);

动作创建者的定义如下所示。注意我使用的是redux-thunk中间件。

export function submitProfile(profile) {
  return dispatch => {
    axios.post(`some_url`, profile)
      .then(response => {
        console.log("Profile submission request was successful!");

        dispatch({ ... }); // dispatch some action

        // this doesn't seem to do anything . . .
        return Promise.resolve();
      })
      .catch(error => {
        console.log(error.response.data.error);
      });
  };
}

我希望能够做的是调用操作创建者提交配置文件，然后在请求成功后，将新路由从我的组件推送到导航器中。我只是想确定帖子请求是否成功所以我可以推动路线;否则，我不会推送任何东西，但说出现错误，请再试一次。

我在线查找并找到了Promise.resolve（），但它似乎无法解决我的问题。我知道如果我使用redux-promise中间件，我可以在调用一个动作创建者后再做一个.then。我如何用redux-thunk做到这一点？

Answer 1

将返回定义为thunk的函数的返回值。因此必须从thunk返回axios请求才能使事情正常运行。

export function submitProfile(profile) {
  return dispatch => {
    return axios.post(`some_url`, profile) // don't forget the return here
      .then(response => {
        console.log("Profile submission request was successful!");

        dispatch({ ... }); // dispatch some action

        return Promise.resolve();
      })
      .catch(error => {
        console.log(error.response.data.error);
      });
  };
}

使用redux-thunk从React Native中的动作创建者返回Promise

1 个答案: