Làm cách nào để gửi các thành phần con trong React Redux?

Question

Máy chủ của tôi có mã như thế này:

<ReactRedux.Provider store={store}><Layout defaultStore={JSON.stringify(store.getState())}/></ReactRedux.Provider>

<Layout> rõ ràng là có nhiều thành phần mà tổ hơn.

Tôi có một lớp như xuống sâu hơn này:

import React from 'react'; 

export default React.createClass({ 
    render: function(){ 
    var classes = [ 
     'js-select-product', 
     'pseudo-link' 
    ]; 

    if (this.props.selected) { 
     classes.push('bold'); 
    } 

    return (
     <li className="js-product-selection"> 
     <span onClick={this.props.onClick} className={classes.join(' ')} data-product={this.props.id}>{this.props.name}</span> 
     </li> 
    ); 
    } 
}); 

Những gì tôi thực sự muốn làm chứ không phải là this.props.onClick là gửi một sự kiện để set state in a reducer. Tôi đã được một số điều trực tuyến về bối cảnh nhưng tôi đã nhận được đánh giá hỗn hợp như tính năng đó đã hoặc sẽ không biến mất.

EDIT connect method này tôi thấy nhưng tôi có thể thề tôi muốn đọc không sử dụng connect ở trẻ em thành phần.

Answer 1

Bạn đang quá bị cuốn vào các thành phần của trẻ em. Bạn nên cấu trúc ứng dụng của mình để bạn có các thành phần được kết nối và các thành phần không được kết nối. Các thành phần không được kết nối phải là các chức năng không trạng thái, thuần túy, thực chất đòi hỏi tất cả các yêu cầu của chúng thông qua các đạo cụ. Các thành phần được kết nối nên sử dụng chức năng connect để ánh xạ trạng thái redux tới các đạo cụ và bộ điều chỉnh redux cho các đạo cụ, và sau đó chịu trách nhiệm truyền các đạo cụ đó cho các thành phần con.

Bạn có thể có nhiều thành phần được kết nối trong một ứng dụng và nhiều thành phần không được kết nối. This post (bởi tác giả của redux) thảo luận chi tiết hơn và nói về các thành phần không kết nối (câm) chịu trách nhiệm hiển thị UI thực tế và các thành phần được kết nối (thông minh) chịu trách nhiệm soạn các thành phần không được kết nối.

Một ví dụ có thể được (sử dụng một số cú pháp mới hơn):

class Image extends React { 
    render() { 
    return (
     <div> 
     <h1>{this.props.name}</h1> 
     <img src={this.props.src} /> 
     <button onClick={this.props.onClick}>Click me</button> 
     </div> 
    ); 
    } 
} 

class ImageList extends React { 
    render() { 
    return (
     this.props.images.map(i => <Image name={i.name} src={i.src} onClick={this.props.updateImage} />) 
    ); 
    } 
} 

const mapStateToProps = (state) => { 
    return { 
    images: state.images, 
    }; 
}; 
const mapDispatchToProps = (dispatch) => { 
    return { 
    updateImage:() => dispatch(updateImageAction()), 
    }; 
}; 
export default connect(mapStateToProps, mapDispatchToProps)(ImageList); 

Trong ví dụ này, ImageList là một thành phần kết nối và Image là một thành phần không được kết nối.

Answer 2

Đã từng có lời khuyên về hiệu ứng để cố giới hạn các thành phần mà bạn kết nối. Xem ví dụ:

https://github.com/reactjs/redux/issues/419

https://github.com/reactjs/redux/issues/419#issuecomment-178850728

Dù sao, đó là thực sự hữu ích hơn cho ủy thác một lát nhà nước một thành phần. Bạn có thể làm điều đó nếu nó có ý nghĩa cho tình hình của bạn, hoặc nếu bạn không muốn chuyển xuống một cuộc gọi lại gọi dispatch() bạn có thể vượt qua cửa hàng hoặc gửi xuống phân cấp nếu bạn muốn.