ReactJS: Cách tạo và sử dụng Context API

Reactjs là một View library, nó cho phép chúng ta kết hợp những component với nhau để tạo nên một web app. Và một khi cây component của app nhiều hơn thì sẽ phát sinh trường hợp chúng ta muốn chia sẻ những state chung với nhau cho nhiều component. Do đó, bạn có thể cân nhắc và sử dụng Redux. Nhưng theo tôi thì Redux chỉ thích hợp để quản lí những state chung cho những app lớn và có nhiều state cần chia sẻ.

Cho nên để giải quyết bài toán cho những mục đích đơn giản hơn. React đã tạo ra một Context API, cho phép chúng ta chia sẻ những state cho nhiều component khác nhau.

Có thể bạn hỏi tại sao chúng ta không dùng props để truyển state giữa các component? Một câu hỏi rất hay, nhưng liệu có thuận tiện khi chúng ta muốn truyền một state qua nhiều(4-5) cấp component và những component ở giữa không dùng đến props trung gian. Chúng chỉ làm nhiệm vụ trung chuyển state từ component cha xuống nhiều cấp component con khác nhau.

Và React đã nghĩ ra cách tạo một Context chung với những state ban đầu và chúng ta sẽ sử dụng Provider để khởi tạo value cho Context. Sau đó có những component nào muốn sử dụng Context đó thì chỉ việc tạo một Consumer là sẽ nhận được những state từ Context.

Chúng ta xem ví dụ sau. App.js được khởi tạo từ create-react-app.

Trên đây, chúng ta có phiên bản khi không sử dụng Context API. App có hai component là Family và Person. Một ví dụ đơn giản bạn có thể nhận ra rằng Family nhận person như một props, sau đó nó chỉ làm nhiệm vụ render Person và pass props xuống cho Person component.

Sau đây chúng ta cùng refactor lại bằng việc sử dụng Context API như sau:

Ở phiên bản sau, khi render Person component, chúng ta đọc props trực tiêp từ Context. Khi tạo một Context, chúng ta khai báo một Provider component và wrap bên ngoài App. React Context bao gồm một số thàng phần sau:

• React.createContext: khởi tạo một Context
• <MyContext.Provider /> : tạo một nơi để set value ban đầu cho Context
• <MyContext.Consumer />: wrap bên ngoài component muốn truy xuất value của Context.