React.js 21 – Giới thiệu React-Redux

0
78

React-Redux là gì?

React-Redux là một liên kết Redux cho React. Nó là một thư viện nhỏ để kết nối Redux và React một cách hiểu quả.

Phương thức quan trọng nhất bạn sẽ làm việc với nó là connect.

connect giúp kết nối một component react với store của Redux. Và những điều căn bản nhất bạn cần biết là.

  • function mapStateToProps
  • function mapDispatchToProps

mapStateToProps giúp kết nối một phần của State Redux với các props trong component của React. Bằng cách đó , một component React được kết nối sẽ có quyền truy cập vào các phần dữ liệu của cửa hàng mà nó cần.

mapDispatchToProps  giúp kết nối các action Redux với các props bằng React. Bằng cách này, một component React được kết nối sẽ có thể gửi các action.

Cài đặt React-Redux

React-Redux là một thư viện nhỏ gọn và có thể cài đặt nó qua NPM.

Kết nối React-Redux

Chúng ta thấy rằng mapStateToProps kết nối một phần state Redux với props của React Component. Bạn sẽ tự hỏi. Liệu điều này có đủ để kết nối Redux với React hay không? Câu trả lời là không.

Để bắt đầu kết nối Redux với React, chúng ta cần phải sử dụng Provider

Provider là một high order component đến từ react-redux. Nó sẽ kiến trúc lại ứng dụng react của bạn và cho ứng dụng của bạn biết về store của Redux.

Trong Redux store quản lý mọi thứ. React phải nói chuyện với cửa hàng để truy câọ state và gửi các actions.

Tiến hành kết nối.

Mở src/index.js xóa sạch mọi thứ và cập nhật file bằng nội dung sau.

Bạn sẽ thấy. Provider bao bọc toàn bộ ứng dụng của bạn và nhận store thông qua thuộc tính store.

Bây giờ hãy tạo component App vì chúng ta có yêu cầu nó.

Tạo mới thư mục components trong src và một file mới có tên App.js .

Trong component App chúng ta sẽ kết nối tới store để lấy ra state bằng mapStateToProps.

Cập nhật App.js

Bây giờ hãy thử in ra dữ liệu từ trong store được lấy ra xem nhé.

App.js

Hãy nhớ rằng dữ liệu bắt đầu từ trong reducers vì thế để có dữ liệu in ra tôi sẽ thêm một vài dữ liệu mặc định trong reducer.

reducers/index.js

Chạy npm start và bạn sẽ nhận được kết quả như hình bên dưới.

 

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây