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

Posted 2023-02-22

【中文标题】使用 redux-thunk 从 React Native 中的动作创建者返回 Promise

【英文标题】：Returning Promise from action creator in React Native using redux-thunk

【发布时间】：2017-02-10 03:12:52

【问题描述】：

我有一个从我的 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 做到这一点？

【问题讨论】：

好的，现在似乎可以工作了。我只需要为 axios.post 请求添加 return 关键字。即：return dispatch => return axios.post(...); ;

您可以回答自己的问题并接受它。也许这会帮助其他人在未来遇到类似的问题。

其实我没有找到解决方案，因为我想在组件中处理一个错误情况，当我调用动作创建者时，结果发现它总是返回一个成功的情况，即使在动作创建者本身执行了一个捕获。也许我需要在动作创建器的 catch 块中返回 Promise.reject 才能使其工作？

你已经用你的then 和catch 处理了这个promise。您可以在then 中发送任何必要的导航。

我不能这样做，因为我无法访问那里的导航器。导航器通过 props 传递给组件。

【参考方案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);
      );
  ;