为什么不反应-redx connect直接将Dumb Component作为参数？

Question

反应减少的新人很容易被这种说法搞糊涂。

export default connect(mapStateToProps, mapDispatchToProps)(DumbComponent);

connect方法返回一个新方法，以DumbComponent作为参数。

我想知道为什么不直接将DumbComponent作为连接的参数。就像这样。

export default connect(mapStateToProps, mapDispatchToProps, DumbComponent);

对新来者来说，这看起来不那么令人生畏。

实际API设计中的任何原因？

Answer 1

此API设计的一个原因可能是您可以将其用作ES6装饰器。像这样：

@connect(mapStateToProps, mapDispatchToProps)
class DumbComponent extends React.Component { 
  ... 
}

Answer 2

让connect返回一个接受该组件的新函数，使其与其他更高阶的组件很好地匹配。例如，如果使用react-router并重新组合，则可能包含以下代码：

export compose(
  connect(mapStateToProps, mapDispatchToProps),
  withRouter,
  withHandlers({
    // ...
  })
)(DumbComponent)

Answer 3

Redux和React-Redux在整个设计过程中使用了许多函数式编程原理。这包括在一些地方使用currying。

在此示例中，您可能希望将同一组mapState和mapDispatch函数应用于多个不同的＆＃34; plain＆＃34;组件。不确定这是否是他们当时正在考虑的主要用例，但使用connect进行currying可以让您轻松地使用相同的输入创建多个连接的组件。