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

【问题标题】：Redux how and where to merge objects of two asynchronous calls?Redux 如何以及在哪里合并两个异步调用的对象？
【发布时间】：2018-01-29 12:45:14
【问题描述】：

我正在使用 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 的数据合并。

例如：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);

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

【问题讨论】：

标签： reactjs redux react-redux redux-thunk

【解决方案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[] 的操作，然后触发另一个操作同时使用它们更新您的商店（合并或不是）。您可以轻松地将它们合并到您的视图中，甚至在选择器功能中。

【讨论】：

好的，但我仍然必须在组件级别进行合并。
这个是可以的，但是这里不打算处理数据。它实际上是通过mapStateToProps函数提取的props从redux状态进入组件的。随着fetchObjectSuccess 动作被分派到商店，连接的组件将收到带有对象的新道具。问题是要知道何时获取了两个对象。等待 promise 解决并不意味着组件已经从 redux 商店收到了新的 props。
您可以轻松地合并中间件（例如 redux-saga）中的数据，并为您的 reducer 触发操作以使用合并的数据更新存储。这确保了一次渲染，并且只有在两个 Promise 都被解决时。
我主张将数据“原始”保存在存储中，并在选择器中进行必要的合并（可能被记忆）。
@PierreKraemer 同意，我实际上已经更新了我的答案以表明这一点。