决定哪些Redux的容器从

在该示例中的组件树，组件C和E都需要相同的数据进行API调用。这些数据是从调用一个动作触发的API调用中获取的。

我的问题是，应该在哪里调度取动作？

它可能发生在componentWillMount()（通过mapDispatchToProps()）方法的第一个双亲组件，在这种情况下组件B.问题在于组件B现在对孩子需要的数据有了深入的了解，并且我无法再使用组件C或E而没有更高级的组件。

或者，它可能发生在组件C和E的componentWillMount()（同样，通过mapDispatchToProps()），潜在地使用动作创建时的去抖动（可用的帮助程序库）。我对此的担忧是，现在Component C和E有一些知识，即它们存在于相同的页面上，否则它们不会反弹。更糟的是，如果组件C出现在没有组件E的另一个页面上，那么它不必要地去除了一个动作。

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

来源

2017-06-29 Alex

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

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

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

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

因此，跟踪“我们现在正在抓取？”值在你的状态，并且还有逻辑来确定数据是否已经被加载。这样，你可以多次调用thunk，只实际获取一次。

来源

2017-06-29 16:18:50 markerikson

决定哪些Redux的容器从

回答

相关问题