Back to blog

Feb 09, 2025

Chuyện chọn Redux hay React Context

PH

Phineas

@Phineas

cover

Một buổi chiều sắp tan làm, mình vừa đi dạo quanh công ty vừa ngẫm nghĩ về sự nghiệp coder đầy chông gai thì bỗng dưng có thằng cu em phi tới:

  • "Hú, anh PHI NÍT, cho em hỏi này xíu được không?"

Mình nở nụ cười thân thiện kiểu đàn anh dày dạn kinh nghiệm bóc phét, nghĩ bụng chắc hỏi chuyện đời, sự nghiệp đồ đây, ai dè nó quay qua hỏi:

  • "Anh hay xài Redux hay React Context API vậy anh, dự án hiện tại xài gì vậy?"

Mình đứng hình vài giây, nghĩ chắc cu em này muốn nghe cao kiến đây, bèn trả lời một cách điềm đạm:

  • "À, ờ anh thì dùng cả hai tùy dự án, mà dự án hiện tại đang xài Context."

Tưởng thế là ổn, ai ngờ nó chép miệng một cái rồi buông một câu nghe như sét đánh ngang tai:

  • "Đù, giờ mà anh còn xài React Context hả? Cùi bỏ mịa, em vứt nó từ đời cụ Phong Xi Ô Phi La Tô rồi!"

Tiếp tục đứng hình tập 2. Trong đầu bật lên câu hỏi: "Ủa, gì zậy, React Context giờ thành ra phế phẩm vậy luôn à?"

Nhưng không cam tâm bị hạ gục dễ dàng, mình bèn bật chế độ "kể chuyện":

Ngày nọ, công ty phát triển ứng dụng to bự, tổ chức quản lý khu đô thị (hay còn gọi là "trông nhà cho dân cư"). Hai ứng viên nặng ký là Redux và React Context đến tranh tài.

Redux bước vào, đeo kính dày cộp, mang theo một cái cặp to tướng, bên trong nào là giấy tờ, hồ sơ. Anh ấy tuyên bố:

  • "Tao là Redux, siêu quản lý state! Nhà to, state phức tạp cỡ nào tao cũng xử đẹp. Có khi cả chục người ở, mỗi người thích ăn một món khác nhau, thích ngủ giường nào, tao quản hết! Nhà nào có trẻ con quấy khóc, tao còn nhờ mấy thằng trợ lý như redux-thunk với redux-saga trông hộ, khỏi lo!"

Nghe có vẻ oách đấy! Nhưng có một vấn đề nho nhỏ...

Ai ngờ Redux lại hơi rắc rối, muốn làm gì cũng phải có giấy tờ, thủ tục hành chính đàng hoàng, từ "action", "reducer" đến "store". Có khi chỉ việc bật cái đèn, mà phải làm đơn xin, trình duyệt qua mấy cấp nữa chứ!

Sau đó, React Context ung dung bước vào, vẻ ngoài đơn giản, thoải mái:

  • "Tôi thì khác. Nhà nào nhỏ nhỏ, dễ thương, chỉ có vài người ở, muốn chia sẻ phòng ngủ hay bếp núc, cứ bảo tôi một tiếng là xong. Không cần thủ tục rườm rà, chỉ việc cho mượn key (context) là ai cũng dùng được hết. Muốn gì cứ xài Provider với Consumer, nhanh gọn lẹ!"

Nghe cũng được đấy! Nhưng khổ cái là nếu nhà đông người một chút, mỗi lần có ai di chuyển đồ đạc, là y như rằng cả nhà bị kéo theo re-render hết! Nhà to lên một chút là thằng Context này bắt đầu ngộp thở, xử lý không nổi.

Cuối cùng, nhà tuyển dụng đắn đo:

  • "Thằng Redux tuy chuyên nghiệp nhưng làm gì cũng rắc rối, nhà lớn thì hợp chứ nhà nhỏ lại không tiện lắm. Còn thằng Context thì dễ xài, nhưng gặp nhà to một cái là bắt đầu hụt hơi."

Vậy nên, kết luận của câu chuyện là:

  • Nhà nhỏ, ít người (tức dự án vừa và nhỏ), chọn React Context cho tiện.
  • Nhà to, đông người, nhiều nhu cầu phức tạp (tức dự án lớn), cứ gọi Redux ra mà làm quản lý, vì nó chuyên nghiệp và có đủ trợ lý để xử lý mọi thứ.

Cuối cùng cu em nó nheo mắt nói:

  • "Thôi để em xem lại, nhưng mà Redux mới là chân ái nha anh!"

Rồi nó quay đi. Mình thở phào, tự dặn lòng: "Cũng may chưa bị bắt bẻ tiếp, lần sau chắc phải chuẩn bị kỹ hơn... hoặc là thôi không đi lượn nữa để đỡ đau tim :))."