Tại sao mapStateToProps và mapDispatchToProps không chỉ là một hàm trong Redux?

Question

Ai đó có thể giải thích cho tôi lý do tại sao Redux có hai chức năng mapStateToProps và mapDispatchToProps cả hai đều thêm đạo cụ vào một vùng chứa?

Định nghĩa:

mapStateToProps là một tiện ích giúp thành phần của bạn được cập nhật nhà nước (được cập nhật bởi một số thành phần khác)

mapDispatchToProps là một tiện ích mà sẽ giúp thành phần của bạn để bắn sự kiện hành động (gửi hành động có thể gây ra thay đổi của trạng thái đơn đăng ký)

Tại sao nhóm Redux chọn chia thành hai hàm ánh xạ - tức là tại sao không chỉ có một hàm mapToProps (trạng thái, công văn, đạo cụ) làm cả hai?

• Có phải chỉ tách mối quan tâm/dễ hiểu hơn không?
• Có phải do các vấn đề về hiệu suất có ràng buộc lại trong mapDispatchToProps tạo ra các chức năng mới cho mọi thay đổi không? Có chức năng riêng biệt cho các ràng buộc sáng tạo hành động sẽ giúp tránh việc làm thêm này? Xét rằng mapStateToProps được gọi trên mọi thay đổi trạng thái.

Ví dụ:

const increaseAction = { type: 'increase' } 

class Counter extends Component { 
    render() { 
    const { value, onIncreaseClick } = this.props 
    return (
     <div> 
     <span>{value}</span> 
     <button onClick={onIncreaseClick}>Increase</button> 
     </div> 
    ) 
    } 
} 

function mapDispatchToProps(dispatch) { 
    return { 
    onIncreaseClick:() => dispatch(increaseAction) 
    } 

}

Xem này Redux example on codesandbox

Answer 1

@Andrey Prokhorov là đúng, và đó thật buồn cười bạn hỏi. Tôi tìm thấy chính mình trong ruột github vấn đề trước đó ngày hôm nay và tìm thấy vấn đề này (Add state as the third parameter to mapDispatchToProps). Mặc dù tiêu đề dường như không liên quan, nếu bạn tìm hiểu các nhận xét, gaearon (tác giả của phản ứng-redux) giải thích:

Hãy xem #1. Tùy chọn này đã được xem xét và bị từ chối. Có, rất tệ khi hiệu suất liên kết lại tác vụ tác vụ đối với mọi công văn, đó là điều sẽ xảy ra nếu chúng tôi cho phép mọi người truy cập trạng thái ở cùng nơi họ ràng buộc người tạo hành động. Về mặt kỹ thuật, họ vẫn có thể làm điều đó ngay bây giờ với mergeProps nhưng nó ẩn đủ tốt rằng những người không có kinh nghiệm với Redux không phát hiện ra nó bằng lỗi .

Tôi cũng liên kết với vấn đề đầu tiên mà gaearon liên kết tới phản ứng-redux nơi nó được thảo luận (nó đã được phát hành số 1 trên github cho phản ứng-redux). Tôi chắc chắn rằng họ có thể thay đổi nó vào cách bạn mô tả, nhưng tôi nghĩ rằng bình luận gaearon của tiền nó lên:

Mục đích của thư viện này là để khuyến khích mô hình performant vì khác mọi người sẽ nói “Redux là chậm! ”Ngay cả khi nguyên nhân là mã ràng buộc chức năng tối ưu của chúng.Chúng tôi không muốn điều này xảy ra, vì vậy, chúng tôi muốn thực hiện một số trường hợp không hiệu quả nhất định để triển khai.