Quản lý trạng thái toàn cục cho ứng dụng web của bạn với Context API trong ReactJS

Quản lý trạng thái là một trong những thách thức khó nhất khi xây dựng ứng dụng web với ReactJS. Khi ứng dụng trở nên phức tạp, truyền props thông qua các component sẽ trở nên đau đớn và khó quản lý. Để giải quyết vấn đề này, bạn có thể sử dụng Context API trong ReactJS. Context API là một tính năng của ReactJS giúp bạn tạo ra các biến toàn cục mà bạn có thể sử dụng và chia sẻ với bất kỳ component nào trong ứng dụng của bạn.

I. Khái quát về Context API

Context API là một thành phần cốt lõi của ReactJS để quản lý trạng thái liên quan đến toàn bộ ứng dụng. Với Context API, bạn có thể truy cập trạng thái của ứng dụng mà không cần thông qua các thành phần cha. Trong những trường hợp chúng ta cần truy cập trạng thái của ứng dụng từ nhiều thành phần khác nhau, Context API là một giải pháp tốt hơn so với prop drilling (truyền các props từng cấp cho tất cả các thành phần).

II. Tạo một Context trong ReactJS

Ở ví dụ này, chúng ta sẽ xây dựng một ứng dụng đơn giản để hiển thị thông tin người dùng. Chúng ta sẽ sử dụng Context API để quản lý thông tin đăng nhập của người dùng trên toàn bộ ứng dụng.

Đầu tiên, chúng ta sẽ tạo một Context bằng cách sử dụng hàm createContext của React. Mỗi Context sẽ có hai thành phần: `Provider` và `Consumer`. `Provider` sẽ cung cấp thông tin cho toàn bộ ứng dụng, trong khi `Consumer` sẽ sử dụng thông tin đó.

Đây là code ví dụ để tạo một Context:

import React from 'react';

const UserContext = React.createContext();

export default UserContext;

III. Tạo một Provider trong Context

`Provider` sẽ cung cấp thông tin cho toàn bộ ứng dụng. Trong ví dụ của chúng ta, `Provider` sẽ cung cấp thông tin đăng nhập của người dùng. Bạn có thể tạo một component tên `UserProvider` để định nghĩa tất cả các giá trị đầu vào của `Provider`.

Ở đây, chúng tôi đưa ra một ví dụ cụ thể. Component `UserProvider` sử dụng useState hook để lưu trữ thông tin đăng nhập của người dùng và truyền nó vào `Provider` bằng cách sử dụng giá trị `value`:

import React, { useState } from "react";
import UserContext from "./UserContext";


const UserProvider = (props) => {
  const [loggedIn, setLoggedIn] = useState(false);
  const [username, setUsername] = useState(null);
  const [password, setPassword] = useState(null);


  const login = (username, password) => {
    setUsername(username);
    setPassword(password);
    setLoggedIn(true);
  };


  const logout = () => {
    setUsername(null);
    setPassword(null);
    setLoggedIn(false);
  };


  const value = {
    loggedIn,
    username,
    password,
    login,
    logout,
  };


  return (
    <UserContext.Provider value={value}>
      {props.children}
    </UserContext.Provider>
  );
};


export default UserProvider;

IV. Sử dụng Consumer trong Context

Sau khi tạo xong `Provider` trong Context, bạn có thể sử dụng thông tin của `Provider` trong bất kỳ thành phần con nào của ứng dụng bằng cách sử dụng `Consumer`.

Ví dụ, chúng ta muốn hiển thị tên người dùng trong đầu trang web nếu họ đã đăng nhập và ẩn nó nếu chưa đăng nhập. Chúng ta có thể tạo một component tên `Header` và sử dụng `Consumer` để lấy thông tin đăng nhập của người dùng:

import React from "react";
import UserContext from "./UserContext";


const Header = () => (
  <UserContext.Consumer>
    {(context) => {
      if (context.loggedIn) {
        return <h1>Hello, {context.username}!</h1>;
      } else {
        return <h1>Please log in.</h1>;
      }
    }}
  </UserContext.Consumer>
);

export default Header;

Điều này sẽ hiển thị “Hello, [tên người dùng]!” nếu đã đăng nhập và “Please log in.” nếu chưa đăng nhập.

Bên cạnh đó, bạn cũng có thể sử dụng useContext hook để sử dụng dữ liệu từ Context và không cần phải sử dụng Consumer.

V. Kết luận

Context API là một giải pháp tốt để quản lý trạng thái toàn cục cho ứng dụng của bạn. Nó giúp bạn truy cập trạng thái của ứng dụng mà không cần thông qua các thành phần cha, giúp giảm thiểu hiện tượng prop drilling. Hy vọng bài viết này sẽ giúp ích cho bạn trong việc quản lý trạng thái của ứng dụng của mình.

Bạn có thể xem các kỹ năng nâng cao khác của reactjs tại đây: ReactJS: các kỹ thuật lập trình nâng cao và thực hành tốt nhất bạn phải biết.