Question

我想使用React and Redux - Modal Window和data form包含4 inputs/selects UI elements来重新创建典型的用户界面模式。我读了很多关于智能容器组件和哑表示组件的内容，但没有足够的练习来确定这种特殊情况下的最佳组合模式。
目前我想出了以下组成部分：

<ModalContainer />
<ModalWindow />
<Form />
<Input 1/> ... <Input 2/>

请，建议：

巫婆组件应该被视为智能和哑巴？
如何使用Redux实现正确的数据流？
在这种情况下，组件构成的外观如何？
要阅读的任何规范代码示例或博客？

Answer 1

哪些组件应该被视为智能和愚蠢？

你的智能组件也就是所有的逻辑应该存在于容器中，你可以在这里得到所有数据并将其传递给只呈现组件的表示组件（没有别的，这就是为什么它们被称为哑）。关于这个here有一篇很棒的文章，它解释得非常好。

如何使用Redux实现正确的数据流？

嗯，我会说这个问题非常广泛，而且redux docs本身就是理解这个问题的好方法。

在这种情况下组件构成的外观如何？

<强> ModalContainer.js

class ModalContainer extends React.Component{
   render(){
   return <Modal {...this.props} />
  }
}

function mapDispatchToProps(dispatch){
 //map your dispatches here
}

export default connect()(ModalContainer)

<强> Modal.js

class Modal extends React.Component{
  render() {
    // you can change your modal content here based on some props, make it more generic
     <Form {...this.props}/>
  }
}

export default Modal

<强> Form.js

class Form extends React.Component{

  onSubmit () {
    const {dispatch} = this.props
    //dispatch your action here to call API and update store
  }
  render() {
     <Form onSubmit={this.onSubmit.bind(this)>
        //form data
     </Form>
  }
}

export default Form

P.S：

你可以通过创建一个FormWrapper来使它更通用，它基于道具为你提供模态中的特定形式（换句话说，你可以改变模态的内容并在任何地方使用相同的模态）
上面的代码只是一个演示代码，向您展示如何编写组件，但应该稍加修改。

要阅读的任何规范代码示例或博客？

Sound Redux - 我发现这段代码在开始时非常干净且有用。

请询问您是否需要其他任何内容

React Redux组合

1 个答案: