React-redux의 Connect 데코레이터 사용법에 대해

이 글은 주로 React-Redux의 @connect 데코레이터 사용법에 대한 자세한 설명을 소개하고 있으니 참고하시기 바랍니다.

저는 최근 React에서 몇 가지 팁에 대해 생각하고 있습니다. 이 글은 Redux에서 데코레이터를 사용하여 Connect를 작성하는 방법을 기록합니다.

일반적으로 리듀서와 액션이 필요하고 연결을 사용하여 구성 요소를 래핑합니다. main 키와 action.js가 있는 리듀서가 이미 있다고 가정해 보겠습니다. 우리 App.js는 일반적으로 다음과 같이 작성합니다:

import React from 'react'
import {render} from 'react-dom'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import action from 'action.js'

class App extends React.Component{
  render(){
    return <p>hello</p>
  }
}
function mapStateToProps(state){
  return state.main
}
function mapDispatchToProps(dispatch){
  return bindActionCreators(action,dispatch)
}
export default connect(mapStateToProps,mapDispatchToProps)(App)

ok, 문제가 없습니다. 커넥트의 사용법을 살펴보면, 익숙하다고 느껴지시나요? 일반적인 포장지인데 데코레이터를 사용해서 꾸며야 합니다. 조금 바꿔봤습니다.

import React from 'react'
import {render} from 'react-dom'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import action from 'action.js'

@connect(
 state=>state.main,
 dispatch=>bindActionCreators(action,dispatch)
)
class App extends React.Component{
  render(){
    return <p>hello</p>
  }
}

완성됐고 편해보이네요. 실제 프로젝트에서는 하나의 모듈 아래에 여러 개의 작은 구성요소가 있을 수 있으며, 모두 동일한 액션과 리듀서를 공유합니다. 각 구성요소에 이것을 작성하는 것이 조금 번거롭나요? 중복된 코드가 너무 많습니다.

실제로 connect를 추출할 수 있습니다. 예를 들어 connect.js를 작성하고:

import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import action from 'action.js'

export default connect(
 state=>state.main,
 dispatch=>bindActionCreators(action,dispatch)
)

그런 다음 사용해야 하는 구성 요소에서 사용합니다.

import React from 'react'
import {render} from 'react-dom'
import connect from 'connect.js'

@connect
export default class App extends React.Component{
  render(){
    return <p>hello</p>
  }
}

초기 사용법과 비교하면 괜찮습니다. 확실히 더 가식적이고 사용하기 더 쉽죠?

여기서 데코레이터가 사용된다는 점에 유의하세요. babel-plugin-transform- decorators-legacy 모듈을 설치한 다음 babel에서 구성해야 합니다.

{
  "plugins":[
    "transform-decorators-legacy"
  ]
}

vscode를 사용하는 경우 프로젝트에 jsconfig를 추가할 수 있습니다. 코드 경고를 제거하기 위한 루트 디렉터리 .json 파일:

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

네, 정말 여기 있습니다. 사실 커넥트에 대해서는 계속해서 생각해 볼 수 있는데, 예를 들어 모든 모듈의 모든 컴포넌트에서 사용할 수 있는 유니버셜 커넥트를 작성할 수 있는데, 이 글은 기회가 되면 다시 쓰지 않겠습니다.

JS에서 @를 데코레이터라고 부르는 것은 좋지 않다고 항상 느껴왔습니다. Java에서처럼 주석이라고 부르는 것이 더 낫습니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

상세 답변: vue의 변경 사항이 구성 요소에 어떤 영향을 미치나요?

Parcel을 사용하여 패키징하는 방법

Vue에서 패키징 도구를 구성하는 방법에 대한 자세한 설명

Vue에서 데이터 변경을 자동으로 감지하는 watch를 구현하는 방법

위 내용은 React-redux의 Connect 데코레이터 사용법에 대해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!