最好将redux状态下发给子级作为道具,还是让孩子直接从redux状态下读取?

时间:2019-02-24 13:18:39

标签: redux react-redux

我意识到这是一个之前可能已经回答过的基本问题,但是我正在寻找一种可能有一定道理的明确答案,因为我还没有找到一个能说服我自己有更好/最好/首选的处理方式。

方案::仪表板组件通过连接接收Redux状态。一些数据在仪表板及其子级之间共享。一些数据特定于仪表板的子级。

问题:我应该总是将道具传给下面的子组件(某物),还是应该总是将它们传给其他人?子组件到redux并直接从redux状态读取所需的数据?

import React, { Component } from "react";
import { connect } from "react-redux";
import ChildOne from ".ChildOne";
import ChildTwo from ".ChildTwo";

class DashboardExample extends Component {
  render() {
    const { sharedData, childOneData, childTwoData } = this.props
    return (
      <div>
        <h1>{sharedData.selectedDate}</h1>
        <ChildOne sharedData={sharedData} childOneData={childOneData} />
        <ChildTwo sharedData={sharedData} childTwoData={childTwoData} />
      </div>
    );
  }
}

const mapStateToProps = state => ({
  sharedData: state.dashboardData,
  childOneData: state.childOneSpecificData,
  childTwoData: state.childTwoSpecificData,
});

export default connect(mapStateToProps)(DashboardExample);

1 个答案:

答案 0 :(得分:1)

如丹·阿布拉莫夫(Dan Abramov)所说,很高兴在Presentational Components和Container Components之间进行划分。

其他组件

  1. 关心事物的外观。

  2. 内部可能包含表示性组件和容器组件**, 并且通常具有一些自己的DOM标记和样式。

  3. 通常允许通过this.props.children进行围堵。

  4. 与其他应用程序无关,例如redux操作 或商店。

  5. 不指定如何加载或修改数据。

  6. 仅通过道具接收数据和回调。

  7. 很少有他们自己的状态(当他们这样做时,它是UI状态,而不是 数据)。

  8. 被写为功能组件,除非它们需要状态, 生命周期挂钩或性能优化。

容器组件

  1. 关心事物的运作方式。
  2. 内部可能同时包含表示性组件和容器组件**,但通常没有任何自己的DOM标记,除了一些包装div之外,并且从未具有任何样式。
  3. 为演示或其他容器组件提供数据和行为。
  4. 调用redux动作并将其作为表示组件的回调提供。
  5. 通常是有状态的,因为它们倾向于充当数据源。
  6. 通常使用高阶组件生成,而不是手工编写。例如,React Redux的connect(),Relay的createContainer()或Flux Utils的Container.create()。

source post

————————————

您问题的具体答案:

我发现尝试坚持上述原则很有帮助。它使您的代码易于推理,并有助于分离关注点(视图/业务逻辑)。 但是,如果您发现自己编写了spaguetti道具来坚持使用它,或者在特定的代码段中感觉不自然,则只需连接Presentational Component。

相关问题