Chào mọi người. Hôm nay mình có làm một task liên quan tới User Experience (trải nghiệm người dùng) và cụ thể hơn đó là việc xác thực người dùng trên web.
Để làm ux với framework thì hẳn có các công cụ phổ biến và mạnh mẽ như redux hay modx. Tuy nhiên ứng dụng mình đang làm rất nhỏ, số chức năng hiện có chỉ đếm trên đầu ngón tay, nếu như import cả lib redux vào mỗi chức năng xác thực thì quả là lấy dao mổ trâu giết gà. Chính vì thế mà mình sử dụng ngay công cụ mà react đã cung cấp trong Hooks API là context và kết hợp với react router doom để thực hiện chức năng này.

Context API react là gì?

  • Giống như readux, Context api cho phép chúng ta tạo một kho lưu trữ các dư liệu của ứng dụng mà dữ liệu này có thể được truy cập và thao tác bởi bất kì compnent con nào nằm trong Context mà chúng ta muốn sử dụng.
  • Và mục đích sinh ra context là để chia sẻ dữ liệu toàn cục cho react component
  • Vì thế chúng ta đễ dàng cấu trúc ứng dụng react hơn.

Khởi tạo context

  • Để tọa một context thì chúng ta sử dụng hàm createContext() của React.
import React from 'react';

const MyContext = React.createContext();

export default MyContext;

Tạo một provider

  • Provider trong contextApi là nơi mà chúng ta khỏi tạo giá trị ban đầu cho một state(data) trong ứng dụng. Nhớ rằng bên trên chúng ta khai báo useCOntext(yourContext) để cho phép đọc và thay đổi context. còn Provider sẽ cung cấp giá trị cho context mà bạn vừa tạo.

  • Ví dụ tạo một provider


const ThemeContext = React.createContext(somthingDataInit);
function App() {
  return (
    <ThemeContext.Provider value={themes.dark}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

Tạo Consumer

  • Ngược với Provider để cung cấp giá trị thì consumer sẽ nhận và sử dung giá trị của context này.
  • Cách sử dụng một consumer như sau:
<ThemeContext.Consumer>
  {value => /* render something based on the context value */}
</ThemeContext.Consumer>


OK mình xin kết thúc bài phát biểu à nhầm, bài viết ở đây. Và mình xin để lại hướng dẫn trực tiếp của react: https://reactjs.org/docs/context.html

Cảm ơn tất cả các bạn, hẹn gặp lại các bạn trong các bài viết sau.