在反应组件中链接 redux 动作创建者 Promise.then()

Question

我计划在我的 redux 操作创建器中使用 axios 进行异步调用和承诺。目前还没有可以使用的 API，所以我将内容保存在本地。

如何在反应组件中使以下内容可链接？

动作创作者

export function fetchResultsIfNeeded() {
    return (dispatch, getState) => {
        if (true) {
            return dispatch(fetchResults(day, hash));
        }

        else {return Promise.resolve();}
    };
}

export function fetchResults(day, hash) {
    return (dispatch) => {
        // Dispatch something here

        return new Promise(resolve => setTimeout(resolve, 1000)).then(() => {
            // Do some stuff here
            // Dispatch some other stuff here as well
        }); // Want to chain on this promise in react component
    };
}

反应组件

import { fetchResultsIfNeeded } from 'actions';

// Class based react component
checkResults(periodFrom, periodTo) {
    this.props.fetchResultsIfNeeded([periodFrom, periodTo]).then(() => {/* Do some stuff here */});
}

// Connected via react redux
export default connect(null, { fetchResultsIfNeeded })(component);

目前收到如下错误，莫非还在等待react-redux左右？

Uncaught TypeError: Cannot read property 'then' of undefined

将动作创建者和组件放在 Pen 中（不知道如何显示完整代码）

Full component code, Full action creator code

Answer 1

我假设您使用的是redux-thunk。您需要从动作创建者中的解析函数返回。正确的流程应该是：

export function fetchResults(day, hash) {
    return (dispatch) => {
        
        dispatch(...).then(
             ( ) => {
                 // Do some stuff here
                 return dispatch(...)
             }
        )            
    }
}

Answer 2

执行此操作的方法不止一种，但使用现有代码执行此操作的最简单方法可能是使用bindActionCreators：

import { fetchResultsIfNeeded } from 'actions';
import { bindActionCreators } from 'redux';

// Class based react component
checkResults(periodFrom, periodTo) {
    this.props.fetchResultsIfNeeded([periodFrom, periodTo]).then(() => {/* Do some stuff here */});
}

// Connected via react redux
export default connect(
  null,
  dispatch => ({
    ...bindActionCreators({ fetchResultsIfNeeded }, dispatch)
  })
)(component);