Question

我正在使用thunk中间件，我有两个异步动作创建者，如下所示。

export const fetchObject = () => {
return dispatch => {
    let action = fetchObjectRequest();
    dispatch(action);
    let url = "URL1";
    let promise = axios.get(url)
        .then(response => dispatch(fetchObjectSuccess(response.data)));

    return handlingErrorsPromise(promise,
        error => {
            console.error(JSON.stringify(error));
            dispatch(errorOccurred(action, error))
        }
    );
}

};

假设我有Object1和Object 2端点，但问题是几乎所有组件都需要Object1，我必须以某种方式将所有其他对象与Object1中的数据合并。

Ex：Object2包含人员ID，我必须在Object1中附加名称。

目前我正在将我的组件属性映射到两个对象，并且我在渲染中检查if语句是否获取了所有对象。像这样：

class Peoples extends Component {

    componentWillMount(){
        this.props.fetchObject1();
        this.props.fetchObject2();
    }

    render() {
        let peoples = this.mergeObjects();
        //rendering
    }

    mergeObjects = () => {
        let isFetching = this.props.object1.isFetching ||
            this.props.object2.isFetching;

        if (isFetching) {
            return {
                isFetching,
                json: []
            };
        }
        let mergedJson = {...};
        return {
            isFetching,
            json: mergedJson
        };
    };
}

const mapDispatchToProps = dispatch => {
    return {
        fetchObject1: () => dispatch(fetchObject1()),
        fetchObject2: () => dispatch(fetchObject2())
    }
};

const mapStateToProps = state => {
    return {
        object1: state.object1,
        object2: state.object2
    };
};

export default Peoples = connect(mapStateToProps, mapDispatchToProps)(Peoples);

是否有更优雅的方式将一个异步对象与我店中的其他对象合并？

Answer 1

我相信你可以使用Promise.all api，因为axios会返回一个承诺。

Promise.all([this.props.fetchObject1(), this.props.fetchObject2()]).then((data) => {
 //do stuff with data
})

更新：

如果您正在使用redux-saga，则可以在this.props.action.fetchObjects()或Promise.all的视图yield all[]中触发操作，然后触发另一项更新商店的操作他们两个一起（合并或不合并）。您可以在视图中甚至在选择器功能中轻松合并它们。

Redux如何以及在哪里合并两个异步调用的对象？

1 个答案: