ReactJS: Tìm hiểu về API ngữ cảnh của React

Với React 16.3, giờ đây chúng ta có quyền truy cập vào một API ngữ cảnh hoàn toàn mới. Với API ngữ cảnh cũ của React, khuyến nghị chính thức là dành cho các nhà phát triển để tránh sử dụng nó, nhưng giờ đây, API ngữ cảnh"mới là "công dân hạng nhất".

Mặc dù không có nghĩa là thay thế cho các thư viện quản lý trạng thái như Redux hoặc MobX, nhưng API ngữ cảnh cho phép chia sẻ dữ liệu toàn cục giữa nhiều component một cách dễ dàng mà không cần phải chuyển nó làm prop. Nó giải quyết một vấn đề phổ biến được gọi là prop-drilling trong đó các prop sẽ cần được truyền cho nhiều component trong cây để tiếp cận component cần nó.

API mới đặc biệt hữu ích để cung cấp dữ liệu cần thiết cho một tỷ lệ phần trăm cao các component trong cây. Các tùy chọn chung như theme đã chọn hoặc tùy chọn ngôn ngữ đã chọn là hai ví dụ điển hình.

Trong bài viết này, chúng ta sẽ giải thích cách sử dụng API ngữ cảnh mới bằng ít từ nhất có thể. Chúng ta sẽ tạo ra một ngữ cảnh Locale đơn giản cung cấp tùy chọn ngôn ngữ giữa tiếng Anh và tiếng Pháp cho các component trong ứng dụng. Lưu ý rằng nó chỉ là một ví dụ đơn giản để chứng minh ưu tiên toàn cầu của một ứng dụng và đối với i18n thực trong React, một giải pháp mạnh mẽ hơn như i18next sẽ thích hợp hơn.

React.createContext

Để tạo ngữ cảnh mới, hãy sử dụng hàm createContext mới của React:

export const LocaleContext = React.createContext('en');

Ở đây, chúng ta cũng truyền vào một giá trị mặc định là 'en' vào ngữ cảnh, nhưng bạn cũng có thể bỏ qua giá trị mặc định này nếu muốn.

Hàm createContext trả về các component là Provider và Consumer.

Provider

Component Provider được sử dụng để bao bọc (wrap) các component trong cây sẽ cần truy cập vào giá trị từ ngữ cảnh. Ở đây, hãy tạo một component LocaleProvider bao bọc LocaleContext Provider và cung cấp một cách để thay đổi giá trị ngôn ngữ của ngữ cảnh:

export const LocaleContext = React.createContext();

class LocaleProvider extends React.Component {
  constructor(props) {
    super(props);

    this.changeLocale = () => {
      this.setState(state => {
        const newLocale = state.locale === 'en' ? 'fr' : 'en';
        return {
          locale: newLocale
        };
      });
    };

    this.state = {
      locale: 'en',
      changeLocale: this.changeLocale
    };
  }

  render() {
    return (
      <LocaleContext.Provider value={this.state}>
        {this.props.children}
      </LocaleContext.Provider>
    );
  }
}

export default LocaleProvider;

Chú ý cách component LocaleProvider chỉ là một lớp bao bọc mỏng xung quanh component Provider của ngữ cảnh của ta. Giá trị của ngữ cảnh được truyền cho provider bằng cách sử dụng prop value và sau đó ta chỉ kết xuất các con của LocaleContext.

Ta chuyển trạng thái của component của ta làm giá trị ngữ cảnh và từ đó giá trị locale và phương thức changeLocale thay đổi giá trị sẽ có sẵn.

Sử dụng provider

Ta có thể sử dụng provider của mình ở cấp cao nhất của component App:

import { Component } from 'react';

import LocaleProvider from './context/LocaleContext';
import Greeting from './Greeting';
import ToggleLocale from './ToggleLocale';

class App extends Component {
  render() {
    return (
      <LocaleProvider>
        <Greeting />
        <ToggleLocale />
      </LocaleProvider>
    );
  }
}

export default App;

Consumer

Bây giờ tất cả những gì còn lại cần làm là truy cập các giá trị từ ngữ cảnh bằng cách sử dụng component Consumer.

Component Greeting của ta trông như thế này:

import { LocaleContext } from './context/LocaleContext';

export default () => {
  return (
    <LocaleContext.Consumer>
      {localeVal =>
        localeVal.locale === 'en' ? <h1>Welcome!</h1> : <h1>Bienvenue!</h1>
      }
    </LocaleContext.Consumer>
  );
};

Và component ToggleLocale của ta trông như thế này:

import { LocaleContext } from './context/LocaleContext';

export default () => {
  return (
    <LocaleContext.Consumer>
      {localeVal => (
        <button onClick={localeVal.changeLocale}>Change language</button>
      )}
    </LocaleContext.Consumer>
  );
};

Component Consumer sử dụng mẫu prop kết xuất và mong đợi một hàm khi con của nó hỗ trợ sẽ nhận được giá trị từ ngữ cảnh. Sau đó, chúng ta có thể truy cập các giá trị của ngữ cảnh và gọi các phương thức mà nó cung cấp.

Với điều này, chúng ta có thể chuyển đổi thông điệp chào mừng của ứng dụng giữa Welcome và Bienvenue.

Như vậy trong ví dụ trên, các component Greeting và ToggleLocale là con trực tiếp của component LocaleProvider, nhưng chúng có thể ở bất kỳ độ sâu nào trong cây component và chúng vẫn có quyền truy cập vào dữ liệu ngữ cảnh toàn cầu miễn là component Consumer của ngữ cảnh được sử dụng và provider ở đâu đó cao hơn trên cây.

Với điều này, bạn nên bắt đầu sử dụng API ngữ cảnh mới trong ứng dụng của mình. Để biết thêm thông tin, bạn cũng có thể tham khảo các tài liệu chính thức.