我正在用React学习Redux,偶然发现了这段代码。我不确定它是否是特定于Redux的,但我在其中一个示例中看到了以下代码片段
连接((状态)=>{
返回{
钥匙:州a.b
};
})
虽然connect的功能非常简单,但我不理解@之前的connect。如果我没有错的话,它甚至不是JavaScript操作符
有人能解释一下这是什么,为什么要用它吗
更新:
它实际上是react redux的一部分,用于将react组件连接到redux存储
@符号实际上是当前提出的一个JavaScript表达式,用于表示装饰程序:
装饰器使得在设计时注释和修改类和属性成为可能
下面是一个在不使用或使用装饰器的情况下设置Redux的示例:
没有装饰师
从“React”导入React;
从“/actionCreators”导入*作为actionCreators;
从“redux”导入{bindActionCreators};
从'react redux'导入{connect};
函数MapStateTops(状态){
返回{todos:state.todos};
}
功能图DispatchToprops(调度){
返回{actions:bindActionCreators(actionCreators,dispatch)};
}
类MyApp扩展了React.Component{
//…在此处定义您的主应用程序
}
导出默认连接(mapStateToProps、mapDispatchToProps)(MyApp);
使用装饰器
从“React”导入React;
从“/actionCreators”导入*作为actionCreators;
从“redux”导入{bindActionCreators};
从'react redux'导入{connect};
函数MapStateTops(状态){
返回{todos:state.todos};
}
功能图DispatchToprops(调度){
返回{actions:bindActionCreators(actionCreators,dispatch)};
}
@连接(MapStateTrops、mapDispatchToProps)
导出默认类MyApp扩展React.Component{
//…在此处定义您的主应用程序
}
以上两个例子都是等价的,只是偏好的问题。此外,decorator语法还没有内置到任何Javascript运行时中,并且仍然是实验性的,可能会发生变化。如果你想使用它,可以使用巴别塔