Sự khác biệt giữa thành phần và vùng chứa trong phản ứng redux

Question

Sự khác biệt giữa thành phần và vùng chứa trong phản ứng redux là gì?

Answer 1

Component là một phần của API phản ứng. Thành phần là một lớp hoặc hàm mô tả một phần của Giao diện người dùng phản ứng.

Vùng chứa là cụm từ không chính thức cho thành phần React được connect được chuyển đến cửa hàng Redux. Các vùng chứa nhận các cập nhật trạng thái Redux và các hành động dispatch và chúng thường không hiển thị các phần tử DOM; họ ủy quyền hiển thị cho presentational thành phần con.

Để biết thêm chi tiết, hãy đọc presentational vs container components bởi Dan Abramov.

Answer 2

Cả hai đều là thành phần; các thùng chứa có chức năng, vì vậy chúng không hiển thị bất kỳ html nào, và sau đó bạn cũng có các thành phần trình bày, nơi bạn viết html thực tế. Mục đích của container là lập bản đồ trạng thái và gửi đến các đạo cụ cho thành phần presentational.

Đọc thêm: Link

Answer 3

Component chịu trách nhiệm cho việc lấy dữ liệu và hiển thị nó được gọi là thành phần thông minh hoặc container. Dữ liệu có thể đến từ redux, đạo cụ hoặc bất kỳ cuộc gọi mạng nào.

Thành phần câm/thuyết trình là những thành phần chịu trách nhiệm trình bày dữ liệu nhận được.

Tốt bài viết với ví dụ ở đây

https://www.cronj.com/blog/difference-container-component-react-js/

Answer 4

Các thành phần xây dựng một piace về quan điểm, vì vậy nó nên làm cho phần tử DOM, đưa nội dung trên màn hình.

Các thùng chứa tham gia vào việc xây dựng dữ liệu, vì vậy nó nên "nói chuyện" với redux, bởi vì nó sẽ cần phải sửa đổi trạng thái. Vì vậy, bạn nên bao gồm kết nối (Redux phản ứng-) những gì nó làm cho các kết nối, và các chức năng mapStateToProps và mapDispatchToProps:

. 
. 
. 
import { connect } from "react-redux"; 

class myContainer extends Component { 
} 

function mapStateToProps(state) { 
    // You return what it will show up as props of myContainer 
    return { 
    property: this.state.property 
    }; 
} 

function mapDispatchToProps(dispatch) { 
    // Whenever property is called, it should be passed to all reducers 
    return bindActionCreators({ property: property }, dispatch); 
} 

export default connect(mapStateToProps, mapDispatchToProps)(myContainer); 

Answer 5

Phản ứng, Redux là thư viện độc lập.

Phản hồi cung cấp cho bạn khung làm việc để tạo tài liệu HTML. Các thành phần theo một cách đại diện cho một phần cụ thể của tài liệu. Các phương thức liên kết với một thành phần sau đó có thể thao tác phần rất cụ thể của tài liệu.

Redux là một khung công tác quy định cho một triết lý cụ thể để lưu trữ và quản lý dữ liệu trong môi trường JS. Nó là một đối tượng JS lớn với các phương thức nhất định được xác định, trường hợp sử dụng tốt nhất có dạng quản lý trạng thái của một ứng dụng web.

Vì React quy định rằng tất cả dữ liệu sẽ chuyển từ gốc sang lá, nó trở nên tẻ nhạt để chính tất cả các đạo cụ, xác định đạo cụ trong các thành phần và sau đó truyền đạo cụ cho các đạo cụ nhất định cho trẻ em. Nó cũng làm cho toàn bộ trạng thái ứng dụng dễ bị tổn thương.

React Redux cung cấp giải pháp sạch, nơi nó kết nối trực tiếp bạn với cửa hàng Redux, chỉ cần gói thành phần được kết nối xung quanh một Component React khác (Container) của bạn. Kể từ khi triển khai, triển khai của bạn, bạn đã xác định phần nào của toàn bộ trạng thái ứng dụng mà bạn yêu cầu. Vì vậy, connect lấy dữ liệu đó ra khỏi cửa hàng và chuyển nó làm đạo cụ cho thành phần mà nó tự bao quanh.

Hãy xem xét ví dụ đơn giản này:

class Person extends Component { 
    constructor(props){ 
    this.name = this.props.name; 
    this.type = this.props.type; 
    } 

    render() { 
    return <p> My name is {this.name}. I am a doctor { this.type } </p> 
    } 
} 

const connect = InnerComponent => { 

    class A extends Component{ 
    render() { 
     return <InnerComponent {...this.props} type="Doctor"/> 
    } 
    } 
    A.displayName = `Connect(${InnerComponent.displayName})` 
    return A 
} 

connect chức năng đi một chỗ dựa type.

Bằng cách này, một kết nối hoạt động như vùng chứa cho thành phần Person.