Cách kết nối React với Redux - hướng dẫn sơ đồ

Bài đăng này hướng đến những người đã biết React và Redux. Điều này sẽ giúp họ hiểu rõ hơn về cách mọi thứ hoạt động dưới mui xe. Khi tôi lần đầu tiên tham gia vào vũ trụ React ?, ~ 3 năm trước, tôi đã rất khó hiểu cách m apStateToProps và m của Redux apDispatchToProps hoạt động và có sẵn cho thành phần React. Đây là hướng dẫn sơ đồ để hiểu rõ hơn về cách onnect hoạt động của c Redux với React.

Giả sử chúng ta có một Searchthành phần.

Và một cửa hàng Redux cổ điển.

Hãy điền vào cửa hàng Redux với Actionđiều phối viên và Reducertiểu bang.

Hộp giảm tốc defaultStatetrông như thế này. Các actionthông số bên trong Reducerchức năng xuất phát từ cửAction.

Hãy kết nối thành phần tìm kiếm React với cửa hàng Redux. Thư viện React-Redux có các ràng buộc React chính thức cho Redux.

Nó cung cấp connectchức năng kết nối thành phần với cửa hàng.

mapDispatchToPropscó nghĩa là ánh xạ dispatchchức năng của Action với thành phần React this.props.

Điều tương tự cũng áp dụng cho mapStateToPropstrường hợp trạng thái của Bộ giảm được ánh xạ tới thành phần React this.props.

  1. Kết nối React với Redux.
  2. Các mapStateToPropsvà mapDispatchToPropsgiao dịch với các cửa hàng của Redux statevà dispatch, tương ứng.
  3. Reducer statevà Action dispatchcó sẵn thông qua this.propsthành phần React.

Hãy để chúng tôi tóm tắt toàn bộ quy trình kết nối React to Redux thông qua một lần nhấp vào nút từ thành phần tìm kiếm React.

  1. Nhấp vào submitnút trên thành phần tìm kiếm React
  2. Các clickchức năng công văn một hành động. dispatchChức năng Hành động được kết nối với thành phần tìm kiếm thông qua mapDispatchToPropsvà được cung cấp chothis.props
  3. (ngoài phạm vi của bài đăng này) Hành động đã phái chịu trách nhiệm về fetchdữ liệu và gửi một hành động khác để cập nhật trạng thái Bộ giảm
  4. Trạng thái Hộp giảm tốc tự cập nhật dữ liệu tìm kiếm mới có sẵn từ Bước 3.
  5. Trạng thái Giảm tốc đã được kết nối với this.propstrong thành phần tìm kiếm quamapStateToProps
  6. this.props có dữ liệu tìm kiếm mới nhất và chế độ xem hiện đang hiển thị để hiển thị kết quả tìm kiếm được cập nhật