Question

这可能是一个天真的问题，但我是新来的反应 - 还原，我正在学习。

上下文：鉴于我有一个react-redux应用程序。在我的顶级组件中，我在底部有这个：

function mapStateToProps({ auth }) {
  return { auth };
}

export default connect(mapStateToProps)(newComponent);

'auth'部分来自我的reducer index.js文件：

import { combineReducers } from "redux";
import authReducer from "./authReducer";

export default combineReducers({
  auth: authReducer
});

所以现在这个组件可以访问auth附带的所有数据，在我的应用程序中包含所需的所有用户信息。

随着我的应用程序越来越大，我意识到我需要来自顶级组件1或2层的其他组件中authReducer的数据

我的问题：将顶级组件与auth reducer连接起来是否更好，并将必要的信息传递给子组件？如果一个孩子100层向下需要来自authReducer的信息，我们仍然会逐层传递它吗？

或者我们只是将上面的authReducer连接到需要它的每个组件吗？反复做这件事会贵吗？

Answer 1

该文档涉及围绕此主题的最佳实践：link。相关部分：

目前建议的最佳做法是对您的组件进行分类   作为“表示”或“容器”组件，并提取连接   容器组件只要有意义：

在Redux示例中强调“顶部的一个容器组件”   一个失误。不要把它当作格言。尽量保持你的演讲   组件分开。通过连接创建容器组件   什么时候方便。只要您觉得自己重复代码   在父组件中为同类儿童提供数据，时间   提取容器。通常只要你觉得父母知道   太多关于“个人”数据或其子女的行为，时间   提取容器。

事实上，基准测试表明连接组件更多   通常比较少的连接组件具有更好的性能。

一般来说，尝试在可理解的数据流和可用数据流之间找到平衡点   您的组件的责任范围。

React-Redux mapStateToProps vs传递父道具

1 个答案: