Question

我是新手反应redux并刚开始使用thunk中间件。我确实得到了使用thunk的想法，但我遇到了一个我无法解释的问题。希望有人能够帮助或纠正我。

我在调用一个thunk动作的render()内调用一个函数。当我console.log行动时，它始终处于待处理状态。不知道我在这里做错了什么。它只是将以下内容打印到控制台。

Result form console.log
Promise {<pending>}__proto__: Promise[[PromiseStatus]]: "resolved"[[PromiseValue]]: undefined

这是我的thunk action creator和reducer代码。

// actions.js
export const predictorListAction = () => {
    return async dispatch => {
        function onSuccess(request) {               
          dispatch(predictorListLoadedSucessfullyAction(request.data))
          return request
        }

        try {
            const request = await axios.get(PREDICTOR_LIST_API_URL)
            return onSuccess(request)
        } catch (error) {
            console.log(error)
        }
    };
};


export const predictorListLoadedSucessfullyAction = (payload) => {
    return {
        type: PREDICTOR_LIST_LOADED_SUCCESSFULLY,
        payload
    };
};

// reducer.js
    const initialState = {
        results: []
    }

    export const predictorList = (state=initialState, action) => {

        switch (action.type) {
            case PREDICTOR_LIST_LOADED_SUCCESSFULLY:
                return {
                    ...action.payload
                }
            default:
                return state
        }
    };

我正在调用所有内容的组件。

// component.js
import React, { Component } from 'react';
import { connect } from 'react-redux';

import { predictorListAction } from '../actions/predictorListActions';

class PredictorList extends Component {

    componentDidMount() {
        this.props.predictorListAction()
    }
    test() {
        const results = this.props.predictorListAction()
        return results
    }
    render() {
        console.log(this.test())
        return (
            <div>
                <h1>Predictor</h1>

            </div>

        );
    }
}
const mapStateToProps = (state) => {
    return {
        predictorList: state.predictorList
    }
}


export default connect(mapStateToProps,  { predictorListAction })(PredictorList);

这是我持续获得

的完整控制台输出

P.S：我还有一个问题，就是调用执行API调用的thunk动作的最佳位置。目前我正在componentDidMount中进行这些操作，但如果我没有设置初始状态，它总会抱怨。

由于

Answer 1

我不确定你会这样，但我正在使用如下

导入

import { bindActionCreators } from 'redux'

添加调度

const mapDispatchToProps = ( dispatch ) => {
  return bindActionCreators({
    predictorListAction : predictorListAction,
  }, dispatch )
}


export default connect(mapStateToProps,  mapDispatchToProps)(PredictorList);

您可以在这里查看我使用过的内容 https://github.com/kalaikt/reactjs/blob/master/src/js/view/profile/medallion/report-problem.js

React redux-thunk承诺正在等待中

1 个答案: