Cách Thiết Lập React Context

Prop drilling làm hỏng mã nguồn của bạn. Bạn truyền dữ liệu qua năm lớp component mà chúng không hề cần đến. React Context giải quyết vấn đề này. Tuy nhiên, hầu hết các cách thiết lập lại tạo ra một vấn đề mới.

Khi bạn sử dụng "Go to Definition" trên một context hook, bạn thường chỉ tìm thấy một file không có gì ngoài một lời gọi useContext nhỏ xíu. Logic thực sự lại nằm ở một file khác. Bạn sẽ mất cả ngày chỉ để tìm kiếm logic quản lý state.

Bạn có thể khắc phục điều này bằng một cấu trúc tốt hơn.

Hãy làm theo mô hình này:

  • Đặt context, public hook và logic state vào cùng một file.
  • Giữ Provider như một lớp vỏ mỏng (thin shell).
  • Sử dụng một quy tắc lint để bảo vệ logic riêng tư của bạn.

Cấu trúc các file như sau:

src/context/ • GameContext.ts (Context, public hook, và logic state) • GameProvider.tsx (Một lớp vỏ mỏng)

Bên trong GameContext.ts, hãy tạo ba phần:

  1. Đối tượng context.
  2. Một public hook để các component sử dụng. Hook này nên ném ra một lỗi nếu context bị null. Điều này đảm bảo các component của bạn sẽ báo lỗi ngay lập tức (fail fast) nếu chúng nằm ngoài provider.
  3. Một private hook để quản lý state. Hook này chứa các lời gọi useState hoặc useReducer của bạn.

Bằng cách đặt public hook và logic riêng tư vào cùng một file, tính năng "Go to Definition" sẽ hoạt động hoàn hảo. Bạn có thể nhảy trực tiếp từ component đến phần logic.

Có một rủi ro tồn tại. Vì private hook được export để Provider có thể sử dụng, một đồng nghiệp có thể gọi nó sai chỗ. Nếu họ làm vậy, họ sẽ tạo ra một state mới, biệt lập thay vì sử dụng context dùng chung.

Đừng dùng comment để ngăn chặn điều này. Hãy sử dụng quy tắc ESLint thay thế.

Tôi đã tạo ra eslint-plugin-restrict-callers để giải quyết vấn đề này. Bạn có thể định nghĩa những hàm nào được phép gọi các hook cụ thể.

Ví dụ, bạn có thể bảo ESLint rằng chỉ có GameProvider mới được phép gọi useGameStateManagement. Nếu bất kỳ ai khác cố gắng làm vậy, quá trình build sẽ thất bại với một thông báo lỗi rõ ràng.

Tóm tắt quy trình làm việc:

  • Gom nhóm context, public hooks và logic riêng tư vào một file.
  • Chỉ sử dụng Provider để truyền kết quả của hook vào giá trị của provider.
  • Ném lỗi trong public hook nếu thiếu context.
  • Sử dụng ESLint để thực thi ranh giới giữa các public hook và private hook.

Source: https://dev.to/jareddlewis/how-to-set-up-react-context-2c9h