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

Question

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

我的问题是，抓取操作的调度应该发生在什么地方？

它可能出现在第一个相互父组件（在本例中为组件 B）的 componentWillMount()（通过 mapDispatchToProps()）方法中。这样做的问题是，组件 B 现在对它的子级所需的数据有深入的了解，如果没有一些高阶组件，我将无法再使用组件 C 或 E。

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

有人知道更简洁的模式来获取多个子组件使用的数据吗？

Answer 1

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

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

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

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

因此，跟踪您所在州的 "are we fetching right now?" 值，并且还具有判断数据是否已加载的逻辑。这样，您可以多次调用 thunk 而实际上只获取一次。

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

Deciding which redux container to make API calls from

reactjs

redux

redux-thunk

react-redux