'@' (ที่สัญลักษณ์) ใน Redux @connect decorator คืออะไร

ฉันกำลังเรียนรู้ Redux ด้วย React และสะดุดกับรหัสนี้ ฉันไม่แน่ใจว่าเป็นเฉพาะReduxหรือไม่ แต่ฉันได้เห็นข้อมูลโค้ดต่อไปนี้ในหนึ่งในตัวอย่าง

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

ในขณะที่การทำงานของconnectตรงไปตรงสวย แต่ฉันไม่เข้าใจก่อน@ connectมันไม่ได้เป็นโอเปอเรเตอร์ JavaScript หากฉันไม่ผิด

บางคนสามารถอธิบายได้ว่าอะไรคือสิ่งนี้และทำไมจึงใช้

ปรับปรุง:

อันที่จริงแล้วมันเป็นส่วนหนึ่งreact-reduxที่ใช้เชื่อมต่อส่วนประกอบ React เข้ากับ Redux store

@สัญลักษณ์ในความเป็นจริงการแสดงออก JavaScript เสนอในปัจจุบันที่มีความหมายตกแต่ง :

ผู้ตกแต่งสามารถทำให้คำอธิบายประกอบและปรับเปลี่ยนคลาสและคุณสมบัติได้ในขณะออกแบบ

นี่คือตัวอย่างของการตั้งค่า Redux แบบไม่มีและมี decorator:

ไม่มีมัณฑนากร

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
}

ทั้งสองตัวอย่างข้างต้นเทียบเท่ากันเป็นเพียงเรื่องของการตั้งค่า นอกจากนี้ไวยากรณ์ของมัณฑนากรยังไม่ได้ถูกสร้างขึ้นใน Javascript runtimes ใด ๆ และยังคงอยู่ในช่วงทดลองและอาจมีการเปลี่ยนแปลง หากคุณต้องการที่จะใช้มันก็สามารถใช้ได้โดยใช้บาเบล

สำคัญมาก!

อุปกรณ์ประกอบฉากเหล่านี้เรียกว่าอุปกรณ์ประกอบฉากรัฐและพวกเขามีความแตกต่างจากอุปกรณ์ประกอบฉากปกติเปลี่ยนไปประกอบฉากรัฐส่วนประกอบใด ๆ ของคุณจะเรียกส่วนประกอบทำให้วิธีการอีกครั้งและอีกครั้งแม้ว่าคุณจะไม่ได้ใช้อุปกรณ์ประกอบฉากเหล่านี้ดังนั้นสำหรับเหตุผลที่ผลการดำเนินงานพยายามที่จะผูกไว้กับคอมโพเนนต์ของคุณเท่านั้น อุปกรณ์ประกอบฉากของรัฐที่คุณต้องการภายในองค์ประกอบของคุณและถ้าคุณใช้อุปกรณ์ประกอบฉากย่อยเท่านั้นผูกอุปกรณ์ประกอบฉากเหล่านี้

ตัวอย่าง: สมมติว่าในองค์ประกอบของคุณคุณต้องการเพียงสองอุปกรณ์ประกอบฉาก:

1. ข้อความสุดท้าย
2. ชื่อผู้ใช้

อย่าทำอย่างนี้

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

ทำเช่นนี้

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