Настройка State Management (Recoil) для React-додатку
Recoil — атомарний state manager від Meta. Атоми та селектори утворюють граф стану, який React використовує для точечних ре-рендерів. Нативно підтримує Concurrent Mode, Suspense та асинхронні селектори.
Підходить для великих React-додатків з розгалуженим станом, де важлива гранулярність підписок та вбудована підтримка async без додаткових бібліотек.
Що входить у роботу
Ініціалізація Recoil у проекті, проектування атомів та селекторів, настройка async-даних через Suspense, типізація, devtools, персистентність, атомні сімейства для списків.
Встановлення
npm install recoil
# devtools
npm install recoil-devtools
Обгортаємо додаток у RecoilRoot:
import { RecoilRoot } from 'recoil'
function App() {
return (
<RecoilRoot>
<Router />
</RecoilRoot>
)
}
Атоми
import { atom } from 'recoil'
export const authTokenAtom = atom<string | null>({
key: 'authToken',
default: null,
})
export const cartItemsAtom = atom<CartItem[]>({
key: 'cartItems',
default: [],
})
export const sidebarOpenAtom = atom<boolean>({
key: 'sidebarOpen',
default: false,
})
Ключі атомів — унікальні строки у всьому додатку. Використовувати префікс за доменом: 'cart/items', 'auth/token'.
Селектори
import { selector } from 'recoil'
export const cartTotalSelector = selector<number>({
key: 'cartTotal',
get: ({ get }) => {
const items = get(cartItemsAtom)
return items.reduce((sum, item) => sum + item.price * item.quantity, 0)
},
})
export const cartCountSelector = selector<number>({
key: 'cartCount',
get: ({ get }) => get(cartItemsAtom).reduce((sum, i) => sum + i.quantity, 0),
})
Селектори мемоізовані — пересчитуються тільки при змінені залежних атомів.
Терміни
Базова настройка Recoil — 1–2 години. Async селектори з Suspense — 2–3 години. Складний граф селекторів — 1 день.