Overview

Đối với các bạn đã và đang tìm hiểu về ReactJS, có lẽ không dưới dăm ba lần nghe qua những cái tên như _Redux_, _MobX_, _Context API_,… dùng để quản lý state của ứng dụng. Mỗi công nghệ đều có cho mình những ưu nhược điểm riêng.

Trong lúc chúng ta vẫn đang so sánh, xem xét cái nào “hot” nhất thì trong sự kiện React Europe 2020 tháng 05 vừa qua, Facebook cho ra mắt Recoil - một open-source cho phép mình có thêm một phương pháp mới trong việc quản lý state. Hết anh em bạn bè lần lượt vỗ vai chém gió về Recoil với các mỹ từ nhỏ gọn, linh hoạt, tiện dụng, vân vân và mây mây làm mình cũng rất hiếu kì về nó 😛

Trong bài viết này, cùng mình tìm hiểu nó có gì hay ho mà vừa ra mắt vài tuần đã “nổi như cồn” như vậy nhé ^^

Concept

Theo Official document:

Recoil lets you create a data-flow graph that flows from atoms through selectors & down into React components.

Atom

Atoms are units of the state that components can subscribe to & update as well.

Để tạo một atom:

import { atom } from 'recoil';

export const todoListState = atom({
    key: 'todoListState',
    default: []
});

Atoms cần một globally-unique-key (tương tự _id_, là duy nhất trên cả ứng dụng) và một giá trị mặc định cho trước (có thể là một số, một chuỗi, một hàm hay thậm chí là một xử lý bất đồng bộ).

Chúng ta có thể để component lấy giá trị của atom thông qua useRecoilValue() API:

import { useRecoilValue } from 'recoil';

export default TodoList = () => {
    const todoList = useRecoilValue(todoListState);
    return (
        <ul>
            {todoList.map(todo => <TodoItem key={todo.id} {...todoList} />}
        </ul>
    );
};

Để đơn giản, bạn có thể nghĩ atom giống như một state thông thường, có chăng sự khác biệt ở đây là các components khác có thể subscribe nó được. Khi atom thay đổi, các components này sẽ tự động re-render.

Selector

A selector is a pure function accepting atoms or other selectors as input to transform this state either sync or async.

import { selector } from 'recoil';

export const todoListCount = selector({
    key: 'todoListCount',
    get: ({ get }) => {
        const todoList = get(todoListState);
        return todoList.length;
     }
});

Được ví như một derived-data-based-on-atom, selector có get() function như cái cách mà thư viện reselect() trong ReactJS ecosystem hay @computed in MobX. Hơn nữa, selector còn có set() function dùng để cập nhật một hoặc nhiều atoms.

import { useRecoilValue } from 'recoil';

export default Statistic = () => {
 const count = useRecoilValue(todoListCount);
 return (<p>Statistic: { count }</p>);
};

Khi atom hay selector được cập nhật, selector sẽ được tính toán lại, component cập nhật. Điều này có nghĩa là bất cứ khi nào chúng ta thay đổi todoList,todoList sẽ được cập nhật & todoListCount cũng sẽ được cập nhật theo giá trị mới. TodoList & Statistic sẽ re-render.

#recoil #react #web-development #developer