Recoil - Có chắc yêu là đây?

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. Trong bài viết này, cùng mình tìm hiểu Recoil có gì hay ho mà vừa ra mắt vài tuần đã "nổi như cồn" như vậy nhé ^^

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

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Have you ever thought of having your own app that runs smoothly over multiple platforms? React Native is an open-source cross-platform mobile application framework which is a great option to create mobile apps for both Android and iOS. **[Hire...

Hire dedicated React Native developers for your next project. As the top react native development company we offer you the best service as per your business needs.

Are you looking to [hire React JS developer](https://www.mobiwebtech.com/react-js-development-company/ "hire React JS developer") from a prestigious and reliable React JS development company? Visit at Mobiweb Technologies here we have a big team...

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...