Фото Joan Gamell на Unsplash

Управління станом є основою сучасних React-додатків. Хоча Redux був довгий час улюбленцем, Recoil набув популярності завдяки своїй простоті та гнучкості. У цій статті ми порівняємо Redux та Recoil, створивши два React-додатки в межах Nx монорепозиторію. Один додаток використовуватиме Redux для управління станом, а інший — Recoil. Цей практичний приклад продемонструє їхні переваги та допоможе вам вирішити, який з них підходить для вашого проєкту.

Налаштування Nx монорепозиторію

Перед тим як зануритися в Redux та Recoil, давайте налаштуємо Nx монорепозиторій — потужний інструмент для управління кількома проєктами та спільним кодом в одному репозиторії, слідуючи документації на Nx-Docs та створимо два додатки з іменами redux-app та recoil-app.

Реалізація Redux в redux-app

Redux — це передбачуваний контейнер стану, часто використовуваний для складних додатків з великими потребами в управлінні станом.

1. Встановіть Redux Toolkit

npm install @reduxjs/toolkit react-redux

1. Створіть Redux Slice

import { createSlice } from '@reduxjs/toolkit';  

const counterSlice = createSlice({  
 name: 'counter',  
 initialState: { value: 0 },  
 reducers: {  
 increment: (state) => { state.value += 1; },  
 decrement: (state) => { state.value -= 1; },  
 },  
});  

export const { increment, decrement } = counterSlice.actions;  
export default counterSlice.reducer;

1. Налаштуйте Redux Store

import { configureStore } from '@reduxjs/toolkit';  
import counterReducer from './counterSlice';  

const store = configureStore({  
 reducer: { counter: counterReducer },  
});  

export type RootState = ReturnType<typeof store.getState>;  
export type AppDispatch = typeof store.dispatch;  
export default store;

1. Інтеграція Redux у додаток

import React from 'react';  
import ReactDOM from 'react-dom';  
import App from './app/app';  
import { Provider } from 'react-redux';  
import store from './store';  

ReactDOM.render(  
   <Provider store={store}>  
     <App />  
   </Provider>,  
 document.getElementById('root')  
);

1. Використання стану Redux в компоненті

import React from 'react';  
import { useSelector, useDispatch } from 'react-redux';  
import { increment, decrement } from '../store/counterSlice';  
import { RootState } from '../store';  

const App = () => {  
 const counter = useSelector((state: RootState) => state.counter.value);  
 const dispatch = useDispatch();  

 return (  
   <div>  
     <h1>Redux Counter</h1>  
     <p>Value: {counter}</p>  
     <button onClick={() => dispatch(increment())}>Increment</button>  
     <button onClick={() => dispatch(decrement())}>Decrement</button>  
   </div>  
 );  
};  

export default App;

Реалізація Recoil в recoil-app

Recoil — це бібліотека для управління станом, спеціально розроблена для React, яка пропонує простіший API та тонший контроль над оновленнями стану.

1. Встановіть Recoil

npm install recoil

1. Створіть Recoil Atom

import { atom } from 'recoil';  

export const counterState = atom({  
 key: 'counterState',  
 default: 0,  
});

1. Інтеграція Recoil у додаток

import React from 'react';  
import ReactDOM from 'react-dom';  
import App from './app/app';  
import { RecoilRoot } from 'recoil';  

ReactDOM.render(  
   <RecoilRoot>  
     <App />  
   </RecoilRoot>,  
 document.getElementById('root')  
);

Використання стану Recoil у компоненті

import React from 'react';
import { useRecoilState } from 'recoil';
import { counterState } from '../state/counterState';

const App = () => {
const [counter, setCounter] = useRecoilState(counterState);

return (

);
};

export default App;
```

Порівняння Redux і Recoil

Крива навчання:
- Redux: Крутіша (потрібно налаштувати slices, store).
- Recoil: М'якша (просте використання атомів та селекторів).

Шаблонний код:
- Redux: Більше.
- Recoil: Менше.

Продуктивність:
- Redux: Ефективний, але можливі глобальні перерендери.
- Recoil: Тонке оновлення через атоми.

Інструменти для відладки:
- Redux: Відмінні (Redux DevTools).
- Recoil: Базові (доступний інспектор).

Екосистема:
- Redux: Велика (middleware, плагіни).
- Recoil: Обмежена, але зростає.

Коли використовувати

• Redux: Ідеальний для великих додатків з складною логікою стану та потребами в middleware.
• Recoil: Найкращий для простих додатків або тих, що потребують тонкого управління станом.

Висновок

Налаштувавши Nx монорепозиторій і створивши два додатки з Redux і Recoil, ми продемонстрували їх практичне використання та переваги. Redux блищить у складних додатках з великою підтримкою екосистеми, в той час як Recoil пропонує простоту та гнучкість для проектів, орієнтованих на React.

Обидві бібліотеки мають своє місце в екосистемі React. Обирайте ту, яка найкраще відповідає потребам вашого додатка та кваліфікації вашої команди.

Не соромтесь досліджувати код на GitLab і адаптувати приклади до своїх проектів. Успіхів у програмуванні!

Перекладено з: Redux vs Recoil: A Practical Comparison Using Nx Monorepo