Recoil – Thư viện quản lý state cho React

Tram Ho

Recoil

Khi việc chia sẻ data giữa các cấp component trong React gặp khó khăn, bạn sẽ nghĩ tới Redux. Tuy nhiên, Redux hay các thư viện quản lý state khác của react quá phức tạp hoặc chưa thể làm hài lòng bạn. Recoil chính là một giải pháp khác.

1. Recoil là gì nhỉ?


Recoil chính là 1 thư viện dùng để quản lý state của React, bên cạnh 1 loạt thư viện hầm hố khác như: redux, mobX, flux, … hay thậm chí là context của chính React. Chà, thấy nhiều quá cũng hoang mang nhỉ, nhưng đừng lo, hãy cùng mình đánh giá và so sánh giữa Recoil với Redux nhé (vì thằng Redux này nổi tiếng nhất).

Redux

  • Ưu điểm:
    • Quá nổi tiếng, quá phổ biến.
    • Sử dụng global state (tức là nguyên app sẽ có 1 cái state bự).
  • Nhược điểm:
    • Chính vì nó là global state và cơ chế immutable, nên mỗi khi có 1 thay đổi nhỏ, nguyên cái global state đó sẽ được clone ra, cập nhật thay đổi, thay vào chỗ state cũ, sau đó là xóa state cũ ==> Sẽ có vấn đề về hiệu năng app khi cái global state của bạn quá bự và thường xuyên cập nhật.
    • Sử dụng hơi lằng nhằng (khá cần mấy cái middleware đi kèm).

Recoil

  • Ưu điểm:
    • Cú pháp gần gũi, dễ sử dụng (do giống với state mặc định trong React).
    • Sử dụng các state riêng lẻ (gọi là các atom nhé, phân biệt bằng key).
    • Hỗ trợ luôn quản lý state bất đồng bộ (không cần middleware rườm rà như Redux nhé).
    • Của facebook.
  • Nhược điểm
    • Khá mới mẻ, ít người biết và sử dụng.
    • Mới chỉ là experimental ==> chưa ổn định ==> sử dụng vào production thì nên cân nhắc nhé.

2. Các API chính của Recoil


Recoil Root

  • Là thằng bự nhất bọc bên ngoài để có thể sử dụng Recoil bên trong. (giống Context Provider của React hoặc là Provider trong Redux ấy, nhưng không cần cung cấp store lằng nhằng gì đâu nhé).
  • Có thể có nhiều root cùng tồn tại, và khi nested thì thằng trong cùng sẽ là thằng có tác dụng nhé.

Atom

  • Nó giống như state trong React ấy. Function này sẽ trả về recoil state cho bạn. Và cũng như react state, khi recoil state thay đổi thì các component đang sử dụng nó cũng sẽ được thay đổi.

Selector

  • Cũng trả về recoil state luôn nhé. Nhưng điểm khác với atom ở đây chính là selector sẽ nhận vào pure function và xử lý state từ atom để tạo ra 1 state biến đổi khác (giống như selector trong React-Redux ấy, nghe có vẻ rắc rối, nhưng đi vào ví dụ là hiểu ngay nè).

  • Hỗ trợ cả bất đồng bộ luôn

Hooks

  • useRecoilState: giống y change useState của React luôn, nhận vào recoil state, trả về giá trị của state cùng với hàm để thay đổi giá trị state.

  • useRecoilValue: cũng nhận vào recoil state, nhưng khác cái là chỉ trả về giá trị của state – dùng để truy xuất giá trị state.

  • useSetRecoilState: giống cái useRecoilState, nhưng chỉ trả về hàm để thay đổi giá trị state.

  • useResetRecoilState: trả về hàm để reset state về giá trị default.

3. Code cái Todo-App với Recoil thử nào


  • Khởi tạo một React project với create-react-app

  • Vào trong project vừa khởi tạo và cài Recoil thôi nào

  • Kế tiếp, mình sẽ tạo thư mục recoil trong src, để chứa các recoil state, dạng thế này

Cấu trúc thư mục

  • Sau đó, mình sẽ tạo file listState.js trong folder recoil (như hình trên), dùng để chứa list todo state.

  • Tiếp đó là tạo new list state để trả về danh sách những action có statusnew

  • Làm tương tự để tạo in-progress listcompleted list thôi

  • Giờ thì tạo 3 components: NewList, InProgressListCompletedList để hiện 3 danh sách tương ứng ra màn hình

  • Chỉnh App.js lại để sử dụng 3 components vừa tạo, và cùng với đó là bọc cái RecoilRoot vào vì mình có sử dụng Recoil bên trong nhé

  • Chà, vậy là đã hiện được cái danh sách lên màn hình rồi. Tiếp tới là phải thêm những hành động mới vào cái list to-do này chứ nhỉ. Đầu tiên là thêm hàm set vào newListState để thêm 1 hành động vào danh sách

  • Giờ thì tạo 1 cái component để người dùng nhập nội dung hành động thôi

  • Thêm cái NewActionInput vào App.js luôn để còn xài chứ

  • Giờ mình sẽ thêm chức năng chuyển trạng thái từng hành động từ new -> in-progress -> completed nhé. Nếu bạn để ý thì trong component NewListInProgressList đã có tạo sẵn button trong đó rồi, nên tiếp theo là tạo hàm set cho inprogressListStatecompletedListState

  • Gắn vào cái button trong 2 cái component NewList và InProgressList

  • Doneee, vậy là xong to-do app rồi á, chỉnh css lại xíu thì bạn sẽ có thành quả như này

kết quả

4. Tổng kết


Cú pháp đơn giản gần gũi, đáp ứng đủ yêu cầu của 1 thư viện quản lý state, hỗ trợ cả bất đồng bộ, lại còn không có vấn đề về scalability nữa chứ. Recoil khá là ổn phải không?! Tuy nhiên, mình xin nhắc lại là nó vẫn đang experimental nhé, nên hãy cân nhắc trước khi đáp luôn nó vào production đấy. Còn bạn, bạn nghĩ gì về Recoil? Đừng ngại chia sẻ bên dưới comment nhé, mình rất mong nhận được sự quan tâm cũng như câu hỏi và góp ý từ mọi người. Cám ơn các bạn đã dành thời gian để đọc bài viết này của mình.

Bài viết mang ý kiến và suy nghĩ cá nhân của bản thân mình, có tổng hợp từ nhiều nguồn trên mạng.

P/S: Nếu bạn muốn biết rõ hơn và tiếng Anh cũng ok thì vào xem trực tiếp video của tác giả RecoilDave McCabe luôn nhé, link đây: https://www.youtube.com/watch?v=_ISAA_Jt9kI

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo