React-redux에서 연결 데코레이터를 사용하는 방법-JS 튜토리얼-php.cn

React-redux에서 연결 데코레이터를 사용하는 방법

小云云

풀어 주다： 2018-01-15 09:01:16

원래의

1775명이 탐색했습니다.

이 글은 주로 React-Redux의 @connect 데코레이터 사용법에 대한 자세한 설명을 소개하고 있는데, 에디터가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 올려보겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

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

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

import React from &#39;react&#39;
import {render} from &#39;react-dom&#39;
import {connect} from &#39;react-redux&#39;
import {bindActionCreators} from &#39;redux&#39;
import action from &#39;action.js&#39;

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)

로그인 후 복사

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

import React from &#39;react&#39;
import {render} from &#39;react-dom&#39;
import {connect} from &#39;react-redux&#39;
import {bindActionCreators} from &#39;redux&#39;
import action from &#39;action.js&#39;

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

로그인 후 복사

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

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

import {connect} from &#39;react-redux&#39;
import {bindActionCreators} from &#39;redux&#39;
import action from &#39;action.js&#39;

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

로그인 후 복사

그런 다음 사용해야 하는 구성 요소에서 사용할 수 있습니다.

import React from &#39;react&#39;
import {render} from &#39;react-dom&#39;
import connect from &#39;connect.js&#39;

@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에서 @를 데코레이터라고 부르는 것은 좋지 않다고 항상 느꼈습니다. 자바처럼 주석이라고 부르는 것이 더 좋을 것 같습니다.