React-Redux mapStateToProps vs传递父道具

Question

这可能是一个天真的问题,但我是新的反应 - redux,我正在学习,因为我去.

上下文:鉴于我有一个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

该文档涉及围绕此主题的最佳实践:链接.相关部分:

目前建议的最佳做法是将组件分类为"表示"或"容器"组件,并在任何有意义的地方提取连接的容器组件:

在Redux示例中强调"顶部的一个容器组件"是一个错误.不要把它当作格言.尽量将您的演示文稿组件分开.通过在方便的时候连接它们来创建容器组件.每当您想要复制父组件中的代码以为相同类型的子组件提供数据时,就需要时间来提取容器.通常,一旦您认为父母对"个人"数据或其子女的行为了解太多,就应该及时提取容器.

实际上,基准测试表明,与更少的连接组件相比,更多连接组件通常会带来更好的性能.

通常,尝试在可理解的数据流与组件的责任区域之间找到平衡点.