reactjs - 决定从哪个 redux 容器进行 API 调用

Question

在示例组件树中，组件 C 和 E 都需要相同的数据。此数据是从通过分派(dispatch)操作触发的 API 调用中获取的。

我的问题是，应该在哪里分派(dispatch)提取操作？

它可能发生在第一个共同父组件(本例中为组件 B)的 componentWillMount()(通过 mapDispatchToProps())方法中。问题在于，组件 B 现在对其子组件所需的数据有了深入的了解，如果没有一些高阶组件，我将无法再重复使用组件 C 或 E。

或者，它也可能发生在组件 C 和 E 的 componentWillMount() 中(再次通过 mapDispatchToProps())，可能会在操作创建时使用去抖动(帮助程序)可用的库)。我对此的担忧是，现在组件 C 和 E 知道它们彼此存在于同一页面上，否则它们不会反跳。更糟糕的是，如果组件 C 出现在没有组件 E 的另一个页面上，那么它会不必要地消除 Action 的抖动。

有人知道一种更清晰的模式来获取多个子组件使用的数据吗？

Answer 1

一种方法是让两个组件调用同一个 thunk 操作创建者，该创建者应该检查是否确实需要发出请求。它可能看起来像这样:

function loadSomeDataIfNeeded() {
    return (dispatch, getState) => {
        const state = getState();

        if(!dataAlreadyLoaded(state) && !currentlyFetchingData(state)) {
            dispatch(startFetchingData())

            fetchData()
                .then(response => {
                    dispatch(dataFetched(response));
                });
        }    
    }
}

那么，跟踪“我们现在正在获取吗？”值，并且还有逻辑来确定数据是否已经加载。这样，您可以多次调用 thunk，但实际上只获取一次。