Best Explanation of How Redux Works for Newbie

Bài viết mượn ý tưởng của 1 Youtuber về Redux, link được đính kèm phía dưới. Khá dễ nghe và dễ hiểu, recommend ae newbie bỏ ra gần 1 tiếng vào trực tiếp để cảm nhân nhé :smile:.
Không lan man liên miên nữa. Let’s go!
1. Đặt vấn đề
Trước khi nhào zô thì ae cần phải hiểu tại sao Redux lại quan trọng nhé. Ngoài lề: nghe các tiền bối dùng React Hooks gì đó trâu bò hơn cơ …

Vậy thì chúng ta có thể thay thế Redux bằng Hooks không?
Câu trả lời là… Có! Tuy nhiên chỉ khi mà app của bạn có quy mô nhỏ, không nhiều state và bạn chỉ muốn chia sẻ state giữa các Component thì bạn hoàn toàn có thể sử dụng useContext để thay thế cho Redux.
Đoạn này copy trên internet thôi chứ mình cũng chưa rõ hình thù thằng Redux như nào :roll_eyes:

Chắc hẳn mọi người sẽ gặp nhiều hình ảnh này trên con đường master Redux đúng không? Nhưng mà sau đây mình sẽ chế biến nó thành 1 ví dụ siêu dễ hiểu.

2. Ví dụ super dễ hiểu

**LET’S BUILD AN INSURANCE COMPANY. **
Đầu tiên. ta có 2 khái niệm nhỏ này:
Policy: Khách hàng dùng policy để tạo ràng buộc với công ty. Nếu có điều bất trắc xảy ra thì công ty phải trả tiền cho họ.
Claim: Điều bất trắc xả ra rồi, và khách dùng claim đến công ty để hưởng phần tiền tương ứng.

Giả sử công ty này có 3 phòng ban như hình (Claim department, Policies department & Accounting department - 3 components).
Hãy xem 3 phòng ban này làm gì nhé!
image

Ơ nhưng mà không được. Thời thế thay đổi rồi, ông CEO đến và nói: Chính sách mới của công ty là tập trung data vào 1 nơi (Store), ông nào cần lấy về hay thay đổi gì (cần lấy state hay cần thay đổi state) thì đến hỏi thằng Store.

Mô hình công ty trở thành:

Và tiếp theo là kịch bản minh họa:

OK nhìn hình vẽ ta có:
Bạn đem 1 form (action) đến công ty bảo hiểm.
Tất nhiên là không thể lao thẳng vào làm việc với các văn phòng được, thế thì sẽ lộn xộn lắm :rofl: Vì thế bạn chỉ cần nộp đơn tới ông Form Receiver (Dispatcher) thôi. Ông này có nhiệm vụ xử lý (với API request) và gửi lại các bản copy của form tới cho 3 phòng ban (reducer) để xử lý.

Bây giờ hãy xem form của bạn chứa cái gì nhé

Type: tên của form thể hiện mục đích của form.
Payload: Nội dung form. Ở đây gồm tên và số lượng tiền yêu cầu được nhận.

Ví dụ có 3 thằng đến nộp 3 forms (action) như sau:

Khi đó 1 phòng ban(reducer) sẽ nhận vào 2 thứ form và data lấy từ Store.
( sampleReducer(state=initState,action) )
Sau đó phòng ban xử lý các thứ kiểu như:

  • Có phải form này của phòng mình không?
  • Xử lý gì đó
  • Trả về 1 data mới

Xem hình dưới để hiểu thêm về sự tương ứng trong ví dụ này:

Nguồn: https://www.youtube.com/watch?v=3sjMRS1gJys

Mong nhận được sự góp ý của mọi người ạ :smiley:

3 Likes

Hội Redux này @eren @leo này :wink: