从 React Redux Thunk 返回承诺

Posted

技术标签:

【中文标题】从 React Redux Thunk 返回承诺【英文标题】:Return promise from React Redux Thunk 【发布时间】:2018-12-28 00:29:29 【问题描述】:

我有下一个 React/Redux/Thunk 代码:

这是我对 API 的调用:

//api.js
export const categoriesFetchData = (page, parentOf) => 
  return axios.get(
    url +
    'categories/' +
    '?parent=' +
    parentOf +
    '&limit=10' +
    '&offset=' +
    (page - 1) * 10,
  );
;

这是我的操作(我假装从该操作返回 axios 承诺):

//actions.js
export const subCategoriesFetchData = (page = 1, parentOf) => 
  return dispatch => 
    dispatch(oneCategoryLoading(true));
    return api.categoriesFetchData(page, parentOf)
      .then(response => 
        dispatch(subCategoriesFetchDataSuccess(response.data.results));
        dispatch(oneCategoryLoading(false));
      )
      .catch(error => 
        console.log(error);
      );
  ;
;

在我的容器里:

const mapDispatchToProps = dispatch => 
  return 
    fetchOneCategory: slug => 
      dispatch(fetchOneCategory(slug)).then(() => 
        console.log('working');
      );
    ,

  ;
;

但我收到此错误:

未捕获的类型错误:无法读取未定义的属性 'then'

出了什么问题以及如何在容器中返回一个promise?

感谢您的帮助。

【问题讨论】:

【参考方案1】:

这就是我的处理方式。

首先,您需要对 subCategoriesFetchData 函数进行一些更改:

export const subCategoriesFetchData = (page = 1, parentOf) => 
  return dispatch => 
    dispatch(oneCategoryLoading(true));

    // That's the key thing. Return a new promise, then ma
    return new Promise((resolve, reject) => 

      api.categoriesFetchData(page, parentOf)
        .then(response => 
          dispatch(subCategoriesFetchDataSuccess(response.data.results));
          dispatch(oneCategoryLoading(false));

          resolve(response); // Resolve it with whatever you need
        )
        .catch(error => 
          console.log(error);

          reject(error); // And it's good practice to reject it on error (optional)
        );
    );
  ;
;

然后,您可以使用mapDispatchToProps 然后链接.then()s:

import React from 'react';
import  connect  from 'react-redux';
import  subCategoriesFetchData  from './wherever-it-is';

class MyComponent extends React.Component 

  componentDidMount() 
    this.props.subCategoriesFetchData()
      .then( () =>  console.log('it works'); )
      .catch( () =>  console.log('on error'); );
  

  render() 
    return ( <p>Whatever</p> );
  


const mapDispatchToProps =  subCategoriesFetchData ;

connect(null, mapDispatchToProps)(MyComponent);

【讨论】:

感谢您的回复,以这种方式,该操作不会被调度并且它对我不起作用【参考方案2】:

对不起,我会回答我自己的问题:

我改变这个:

const mapDispatchToProps = dispatch => 
  return 
    fetchOneCategory: slug => 
      dispatch(fetchOneCategory(slug)).then(() => 
        console.log('working');
      );
    ,

  ;
;

const mapDispatchToProps = dispatch => 
  return 
    fetchOneCategory: slug => 
      return dispatch(fetchOneCategory(slug))
    ,
  ;
;

现在我可以做到了:

import React from 'react';
import  connect  from 'react-redux';

class MyComponent extends React.Component 

  componentDidMount() 
    this.props.fetchOneCategory()
      .then( () =>  console.log('it works'); )
      .catch( () =>  console.log('on error'); );
  

  render() 
    return ( <p>Whatever</p> );
  

感谢您的帮助!

【讨论】:

【参考方案3】:

在您的容器中,您不需要

.then(() => 
    console.log('working');
  );

dispatch(fetchOneCategory(slug)) 不返回承诺,没有要读取的then

【讨论】:

dispatch dont,但是 dispatch'd action 的 payload 可以。 感谢您的回复,我的动作创建者返回了一个承诺,(axios 调用)和调度理论上可以返回相同的承诺

以上是关于从 React Redux Thunk 返回承诺的主要内容,如果未能解决你的问题,请参考以下文章

Redux thunk:从分派的动作返回承诺

Redux Thunk, Sequelize (Bluebird) - 向动作创建者“链”返回承诺

Redux-thunk 异步调用和状态

如何键入 Redux thunk 动作创建者以返回承诺

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

Async/Await 和 Redux Thunks:调用 'dispatch' 是不是隐式返回来自 thunk 的承诺?