Question

我刚开始探索Container Component模式。我还没有完全掌握的是表现部分的概念，只关注视觉效果。

这是否意味着这些组件无法调度会改变redux状态的操作？

例如

<MainContainer> 
  <ListComponent />
  <GraphComponent />
</MainContainer>

Say <GraphComponent>显示基于redux状态列表的图表。 <ListComponent>然后使用按钮在redux状态下修改此列表。容器组件模式可以吗？

Answer 1

我认为你不应该在Components中发送动作。在容器组件模式中，您应该将容器中的回调函数（在您的情况下为deepcopy）作为道具传递给MainContainer，当单击按钮并发送操作时（在容器中））结果。

Answer 2

Presentation (Dumb) components就像一年级学生一样，他们有独特的外表，但他们的行为和他们推出的内容是由他们的父母决定或教导的。示例：<Button />

export const Button = props => {
  <button type="button" onClick={props.onClick} />{props.text}</button>
}

独特的外观：它是一个按钮
行为：onClick
内容：文字
onClick和text都由父级提供。

当他们成长到5年级或7年级时，他们可能会开始拥有自己的state并自己决定一些事情。示例：<Input />

class Input extends Component {
 constructor(props) {
  super(props);
  this.state = {
   value: ''
  }
 }

 handleChange = (e) => {
  this.setState({value: e.target.value});
 }

 render() {
  return (
   <input 
    type="text"
    value={this.state.value}
    onChange={this.handleChange}
    onFocus={this.props.onFocus}
   />
  );
 }
}

独特的外观：它是一个输入
国家：决定它自己的价值行为：onFocus
由父母提供的onFocus。

当他们成年后，他们可能会开始表现自己，也可能不会需要父母的指导。他们开始与外界交流（redux商店）自己（现在他们是新的Container组件）。示例

const mapStateToProps = (state, [ownProps]) => {
 ...
}

const mapDispatchToProps = (state, [ownProps]) => {
 ...
}

const MyComponent = (props) => {
 return (
  <ChildComponent {...props} />
 );
}

connect(mapStateToProps, mapDispatchToProps)(MyComponent);

决定自己的行为和内容，可能需要也可能不需要父（read ownProps）

演示组件可能需要也可能不需要任何自己的行为，他们依靠父母。但要谈谈（派遣）到外面世界（商店）他们需要足够大（容器组件）。

因此，要记住的主要事情是从小处开始，然后决定作为你的组件无论是需要成为演示文稿还是容器组成部分，都会增长。

从容器组件模式的presenational组件调度操作？

2 个答案: