Redux@Connection中的“@”(符号)是什么?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (478)

正在学习Redux和Reaction,并无意中发现了这段代码,在其中一个示例中看到了下面的代码片段。

@connect((state) => {
  return {
    key: state.a.b
  };
})

connect很简单,但我不明白@以前connect如果我没有错的话,它甚至不是JavaScript操作符。

有人能解释一下吗?这是什么?为什么要用?

提问于
用户回答回答于

别这么写代码:

@connect(state => ({ 
   user: state.user,
   messages: state.messages
}))

可以尝试下这个

@connect(state => ({ 
   user_name: state.user.name,
   last_message: state.messages[state.messages.length-1]
}))
用户回答回答于

@符号实际上是一个JavaScript表达式实例:

下面是一个设置Redux的示例

import React from 'react';
import * as actionCreators from './actionCreators';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

function mapStateToProps(state) {
  return { todos: state.todos };
}

function mapDispatchToProps(dispatch) {
  return { actions: bindActionCreators(actionCreators, dispatch) };
}

class MyApp extends React.Component {
  // ...define your main app here
}

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

使用后的效果

import React from 'react';
import * as actionCreators from './actionCreators';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

function mapStateToProps(state) {
  return { todos: state.todos };
}

function mapDispatchToProps(dispatch) {
  return { actions: bindActionCreators(actionCreators, dispatch) };
}

@connect(mapStateToProps, mapDispatchToProps)
export default class MyApp extends React.Component {
  // ...define your main app here
}

扫码关注云+社区

领取腾讯云代金券