Giới thiệu về thư viện Recoil

Tổng quan

Recoil là 1 thư viện quản lý trạng thái cho React. Nó có nhiều điểm lợi như bên dưới :

• Tối giản và linh động: Recoil làm việc tương tự như React. Thêm nó vào trong ứng dụng và bạn có thể giúp ứng dụng chạy nhanh hơn, có thể chia sẽ trạng thái của ứng dụng 1 cách linh động.
• Phân cấp dữ liệu: Data và các câu truy vấn sẽ được chia nhỏ ra để sử dụng 1 cách chính xác trong những chức năng nhất định.
• Phạm vi toàn cục: cài đặt cố định, routing, debugging thời gian thực, hoặc undo sẽ được thực hiện trên phạm vi toàn cục của ứng dụng mà không cần phải sửa lại code phía bên dưới.

Cấu trúc

Có 2 component chính của Recoil

Atoms

Atom là những đơn vị trạng thái. chúng có thể update và đăng ký: khi 1 atom được update, tất cả những component đăng ký vào chúng sẽ được tự động reder lại với giá trị mới. Atom cũng có thể được tạo trong lúc runtime. Chúng cũng có thể được ở trong React local component. Nếu nhiều component sử dụng cùng 1 atom, chúng sẽ chia sẽ dữ liệu lẫn nhau.

const fontSizeState = atom({
  key: 'fontSizeState',
  default: 14,
});

Selector

1 selector là 1 hàm thuần túy nhận 1 atom hoặc 1 selector khác làm đối số đầu vào. khi những atom hoặc selector nhận vào đó bị thay đổi, thì hàm của selector sẽ được thực thi lại. Component cũng có thể được đăng ký vào selector tương tự như atom, và sẽ được render lại khi selector thay đổi.

const fontSizeLabelState = selector({
  key: 'fontSizeLabelState',
  get: ({ get }) => {
    const fontSize = get(fontSizeState);
    const unit = 'px';
    return `${fontSize}${unit}`;
  },
});

Cài đặt Nextjs với Recoil

1. Cài đặt recoil

yarn add recoil

2. Thêm RecoilRoot

Component muốn sử dụng recoil state cần thiết phải có RecoilRoot là 1 view cha của nó, để có thể hiện thị. Nơi tốt nhất để đặt RecoilRoot là trong component gốc:

_app.js

import { RecoilRoot } from 'recoil';

export default function MyApp({ Component, pageProps }) {
  return (
    <RecoilRoot>
      <Component {...pageProps} />
    </RecoilRoot>
  );
}

3. Định nghĩa recoil atom và selector

lib/recoil-atoms.js

import { atom, selector } from 'recoil';

export const categoryState = atom({
  key: 'category',
  default: '',
});

export const setCategory = selector({
  key: 'setCategory',
  set: ({ set }, category) => {
    set(categoryState, category);
  },
});

4. Đặt chúng lại cùng với nhau

index.js

import React, { useState } from 'react';
import { categoryState, setCategory } from '../lib/recoil-atoms';
import { useRecoilValue, useSetRecoilState } from 'recoil';

const IndexPage = () => {
  const [inputValue, setInputValue] = useState('');
  const category = useRecoilValue(categoryState);
  const changeCategory = useSetRecoilState(setCategory);

  function handleChange(e) {
    setInputValue(e.target.value);
  }

  function handleSubmit(e) {
    e.preventDefault();
    const getValue = inputValue.trim();
    // check if value exists
    if (getValue) {
      changeCategory(getValue);
      // reset input value
      setInputValue('');
    }
  }

  return (
    <>
      <h1>Category: {category}</h1>
      <form onSubmit={handleSubmit}>
        <input value={inputValue} onChange={handleChange} />
        <input type="submit" value="Change Category" />
      </form>
    </>
  );
};

export default IndexPage;

Kết luận

Recoil thì gọn nhẹ và dễ sử dụng, ngoài ra cũng còn rất nhiều những tính năng khác ở recoil.
Hãy truy cập Recoiljs để xem thêm.