Jak używać dekoratorów w aplikacji React Redux?

Question

Tworzę prostą aplikację za pomocą React Redux. Chcę używać dekorator wstrzyknąć kilka metod w moim składnika .. Widziałem podobny kod w innych projektach:

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 


@creatable 
export default class BookDetails extends Component { 

    render() { 
    console.log(this.props); 
    if (!this.props.Activebook) { 
     return <div> please select book</div> 
    } 
    return (
     <div>{this.props.Activebook.title}</div> 
    ); 
    } 
} 


function creatable() { 
    return Create => { 
    @connect(state=>({Activebook : state.ActiveBook})) 
    class MyDecorator extends Component { 
    render() { 
     console.log('>>>>>>>>>>>>>'); 
    console.log(this.props); 
     console.log('>>>>>>>>>>>>>'); 
     return (
     <div> 
      <Create 
       {...this.props} 
      /> 
     </div> 
     ) 
    } 

    } 
    return MyDecorator; 
    } 
} 

Niestety powyższy kod nie działa. Czemu?

Answer 1

Babel 6 nie obsługuje dekoratorów z presetem es2015 ani z ustawieniem stage-0. Będziesz musiał włożyć wtyczkę babel-plugin-transform-decorators-legacy włączyć dekoratorów:

$ npm install --save-dev babel-plugin-transform-decorators-legacy 

i dodać do swoich wtyczek w .babelrc:

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

Jest to najprostszy sposób wiem, aby uzyskać wsparcie dekorator. Nie są one domyślnie zawarte w Babelu, ponieważ nie zostały jeszcze ujednolicone.

Answer 2

Należy pamiętać, że nie zalecamy używania dekoratorów do łączenia komponentów. Nie znajdziesz ich nigdzie w oficjalnych dokumentach lub przykładach.

Tylko dlatego, że niektóre przykłady społeczności wykorzystują je, nie oznacza to, że jest to dobry pomysł: specyfikacja wciąż się zmienia, obsługa narzędzi jest łuszcząca i, szczerze mówiąc, nie potrzebujesz dekoratorów do connect(), ponieważ desugarują do prostej funkcji połączenia.

Na przykład, zamiast

@connect(mapStateToProps) 
class MyComponent extends Component {} 

trzeba napisać

class MyComponent extends Component {} 
MyComponent = connect(mapStateToProps)(MyComponent) 

W ten sposób nie będziesz musiał martwić się o ich łamanie, aż wniosek jest częścią języka.

Polecam trzymać się konwencji, których używamy w official Redux examples i zachowywać ostrożność przy przyjmowaniu eksperymentalnych rozszerzeń składni.