Tôi làm cách nào để sử dụng trang trí trong ứng dụng React Redux?

Question

Tôi đang tạo ứng dụng đơn giản bằng React Redux. Tôi muốn sử dụng trang trí để tiêm một số phương pháp trong thành phần của mình .. Tôi thấy mã tương tự trong các dự án khác:

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; 
    } 
} 

Thật không may mã trên không hoạt động. Tại sao?

Answer 1

Babel 6 không hỗ trợ trang trí với cài đặt trước es2015, cũng như với cài đặt trước stage-0. Bạn sẽ có thêm các plugin babel-plugin-transform-decorators-legacy để cho phép trang trí:

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

Và thêm vào plugin của bạn trong .babelrc:

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

Đây là cách dễ nhất tôi biết để nhận được hỗ trợ trang trí. Chúng không được bao gồm trong babel theo mặc định vì chúng chưa được chuẩn hóa.

Answer 2

Xin lưu ý rằng chúng tôi không khuyên bạn nên sử dụng trang trí để kết nối các thành phần. Bạn sẽ không tìm thấy chúng ở bất kỳ đâu trong tài liệu hoặc ví dụ chính thức. Chỉ cần bởi vì một số ví dụ cộng đồng sử dụng chúng không có nghĩa là ý tưởng hay: thông số kỹ thuật vẫn đang thay đổi, hỗ trợ công cụ là flaky và thẳng thắn, bạn không cần trang trí cho connect() vì chúng desugar với chức năng đơn giản cuộc gọi.

Ví dụ, thay vì

@connect(mapStateToProps) 
class MyComponent extends Component {} 

bạn nên viết

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

Bằng cách này bạn sẽ không phải lo lắng về việc họ phá vỡ cho đến khi đề nghị này là một phần của ngôn ngữ.

Tôi khuyên bạn nên tuân thủ các quy ước mà chúng tôi sử dụng trong số official Redux examples và rất thận trọng về việc áp dụng tiện ích mở rộng cú pháp thử nghiệm.