Dispatch reactjs là gì
Cấu trúc Redux trong React native - Phần 1
Xin chào các bạn, bài viết này mình sẽ giới thiệu redux là gì, cấu trúc nó ra làm sao, nguyên lý cơ bản của nó. Redux là gì?Theo định nghĩa trong doc của redux:
Hiểu nôm na nó là 1 thư viện JavaScript giúp quản lý state của ứng dụng 1 cách khoa học và hiệu quả hơn. Redux này nó là predictable, cái này mình sẽ giải thích sau nhé. Nguyên tắc hoạt động của ReduxCấu trúcRedux có 4 thành phần như sau: 1. Actions Action là nơi mang các thông tin gửi từ ứng dụng đến Store, mô tả mình muốn làm cái gì với cái store này. Các thông tin này là 1 object mô tả những gì đã xảy ra. Action gồm 2 phần là type (kiểu mô tả action), và giá trị tham số truyền lên:
Ví dụ: tạo 1 action có kiểu là LOGIN, và tham số là email và password
2. Reducers Action có nhiệm vụ mô tả những gì xảy ra nhưng lại không chỉ rõ phần state nào của response thay đổi và thay đổi như thế nào -> việc này sẽ do Reducer đảm nhiệm. Reducer nhận 2 tham số: state cũ và thông tin action được gửi lên, sau đó nó biến đổi trả ra một state mới, không làm thay đổi state cũ.
3. Store Store là 1 object lưu trữ tất cả state của ứng dụng, cho phép truy cập state qua getState(), update state qua dispatch(action), đăng kí listener qua subscribe(listener). Quay lại cái cấu trúc của redux ở bên trên, bạn nhìn vào cái phần Store nhé. Trong store nó có Dispatcher, Reducer, State. Dispatcher là cái phần nó quản lý middleware, thường dùng để gọi API, log, vv... , phần này phức tạp mình sẽ nói ở bài viết sau nhé . Sau khi dispatch xong thì nó đẩy xuống ông Reducer, ông reducer này đơn giản là 1 function nhận vào 2 thứ: state cũ và thông tin action, biến đổi cho ra state mới (như phần reducer mình nói bên trên). Chính nhờ cái này mà redux có tính predictable, tức là cùng 1 state, cùng 1 action thì nó luôn luôn cho ra 1 state mới giống nhau, luôn luôn là như vậy. 4. View View là phần giao diện của mình, hiển thị giao diện thông qua state của store. Ví dụMình sẽ phân tích ví dụ đơn giản ở trong doc của redux:
Giải thích:
Đến đây thì cơ bản bạn đã nắm được nguyên lý hoạt động của Redux:
Có mấy nguyên tắc bạn cần nhớ về Redux như sau:
Bài viết tiếp theo mình sẽ viết về middleware , một phần quan trọng nhất của redux, cái mà chúng ta sẽ dùng liên tục trong các dự án thực tế. Cảm ơn các bạn đã theo dõi bài viết. |