Заметка о Redux и Zustand

Привет, друзья!

На днях мне на глаза попалась статья, посвященная разработке корзины товаров на React с помощью Redux Toolkit для управления состоянием приложения и Redux Persist для хранения состояния в localStorage.

В этой заметке я покажу, как реализовать аналогичный функционал с помощью Zustand, что позволит вам наглядно убедиться в его преимуществах перед Redux как с точки зрения количества кода, так и с точки зрения производительности.

• Руководство по Redux Toolkit
• Шпаргалка по Zustand
• Репозиторий с кодом проекта

Если вам это интересно, прошу под кат.

Реализация корзины товаров с помощью Redux

С вашего позволения, я не буду полностью переводить указанную выше статью, а ограничусь кодом, непосредственно относящимся к Redux.

Итак, что нужно сделать для управления состоянием корзины товаров с помощью Redux и localStorage?

• Устанавливаем 3 зависимости:

npm i @reduxjs/toolkit react-redux redux-persist

• Определяем часть состояния (state slice) корзины:

// src/redux/cartSlice.js import { createSlice } from '@reduxjs/toolkit'; const cartSlice = createSlice({   name: 'cart',   // начальное состояние   initialState: {     cart: [],   },   reducers: {     // метод для добавления товара в корзину     addToCart: (state, action) => {       const itemInCart = state.cart.find((item) => item.id === action.payload.id);       if (itemInCart) {         itemInCart.quantity++;       } else {         state.cart.push({ ...action.payload, quantity: 1 });       }     },     // метод для увеличения количества товара, находящегося в корзине     incrementQuantity: (state, action) => {       const item = state.cart.find((item) => item.id === action.payload);       item.quantity++;     },     // метод для уменьшения количества товара, находящегося в корзине     decrementQuantity: (state, action) => {       const item = state.cart.find((item) => item.id === action.payload);       if (item.quantity === 1) {         item.quantity = 1       } else {         item.quantity--;       }     },     // метод для удаления товара из корзины     removeItem: (state, action) => {       const removeItem = state.cart.filter((item) => item.id !== action.payload);       state.cart = removeItem;     },   }, }); // редуктор export const cartReducer = cartSlice.reducer; // операции (экшены) export const {   addToCart,   incrementQuantity,   decrementQuantity,   removeItem, } = cartSlice.actions;

• Определяем хранилище:

// src/redux/store.js import { configureStore } from "@reduxjs/toolkit"; import { cartReducer } from "./cartSlice"; export const store = configureStore({   reducer: cartReducer });

• Оборачиваем основной компонент приложения в провайдер хранилища:

// src/index.js import { Provider } from 'react-redux'; import { store } from './redux/store';  root.render(   <React.StrictMode>     <BrowserRouter>       <Provider store={store}>         <App />       </Provider>     </BrowserRouter>   </React.StrictMode> );

• Извлекаем состояние из хранилища с помощью хука useSelector:

import { useSelector } from 'react-redux';  // в компоненте const cart = useSelector((state) => state.cart);

• Отправляем операции в редуктор для модификации состояния с помощью метода dispatch, возвращаемого хуком useDispatch:

import { useDispatch } from 'react-redux'; import { addToCart } from "../redux/cartSlice";  // в компоненте const dispatch = useDispatch(); dispatch(   addToCart(item) );

• Для хранения состояния в localStorage хранилище определяется следующим образом:

// src/redux/store.js import { configureStore } from "@reduxjs/toolkit"; import { cartReducer } from "./cartSlice"; import storage from 'redux-persist/lib/storage'; import {   persistStore,   persistReducer,   FLUSH,   REHYDRATE,   PAUSE,   PERSIST,   PURGE,   REGISTER, } from 'redux-persist'; const persistConfig = {   key: 'root',   storage, }; const persistedReducer = persistReducer(persistConfig, cartReducer); export const store = configureStore({   reducer: persistedReducer,   middleware: (getDefaultMiddleware) =>     getDefaultMiddleware({       serializableCheck: {         ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],       },     }), }); export const persistor = persistStore(store);

• А основной компонент приложения оборачивается еще в один провайдер:

import { store, persistor } from './redux'; import { PersistGate } from 'redux-persist/integration/react';  root.render(   <React.StrictMode>     <BrowserRouter>       <Provider store={store}>         <PersistGate loading={<div>Loading...</div>} persistor={persistor}>           <App />         </PersistGate>       </Provider>     </BrowserRouter>   </React.StrictMode> );

Согласитесь, кода получилось многовато. При этом, у нас нет ни одной асинхронной операции, которые в Redux обрабатываются особым образом.

Реализации корзины товаров с помощью Zustand

Клонируем начальный проект из статьи:

git clone -b starter https://github.com/Tammibriggs/shopping-cart.git

Переходим в директорию и устанавливаем Zustand:

cd shopping-cart  npm i zustand

Создаем в директории src файл store/cart.js следующего содержания:

import create from "zustand";  const useCartStore = create((set, get) => ({   // начальное состояние   cart: [],   // метод для добавления товара в корзину   addToCart: (item) => {     const { cart } = get();     const itemInCart = cart.find((i) => i.id === item.id);     const newCart = itemInCart       ? cart.map((i) =>           i.id === item.id ? { ...i, quantity: i.quantity + 1 } : i         )       : [...cart, { ...item, quantity: 1 }];     set({ cart: newCart });   },   // метод для удаления товара из корзины   removeItem: (id) => {     const newCart = get().cart.filter((i) => i.id !== id);     set({ cart: newCart });   },   // метод для увеличения количества товара, находящегося в корзине   incrementQuantity: (id) => {     const newCart = get().cart.map((i) =>       i.id === id ? { ...i, quantity: i.quantity + 1 } : i     );     set({ cart: newCart });   },   // метод для уменьшения количества товара, находящегося в корзине   decrementQuantity: (id) => {     const newCart = get().cart.map((i) =>       i.id === id ? { ...i, quantity: i.quantity - 1 } : i     );     set({ cart: newCart });   },   // дополнительно   // метод для получения общего количества наименований товаров, находящихся в корзине   getTotalItems: () => get().cart.length,   // метод для получения общего количества товаров, находящихся в корзине   getTotalQuantity: () => get().cart.reduce((x, y) => x + y.quantity, 0),   // метод для получения общей стоимости товаров, находящихся в корзине   getTotalPrice: () => get().cart.reduce((x, y) => x + y.price * y.quantity, 0), }));

Внимание: это все, что требуется для управления состоянием приложения с помощью Zustand.

Посмотрим на использование хука useCartStore в компонентах приложения.

Главная страница

На главной странице из состояния извлекается общее количество наименований товаров, находящихся в корзине:

// pages/Home.js import useCartStore from "../store/cart";  function Home() {   // возвращаем объект для того, чтобы повторно рендерить компонент при любом изменении состояния   const { getTotalItems } = useCartStore(({ getTotalItems }) => ({     getTotalItems,   }));   // ... }

Количество наименований отображается рядом с иконкой (кнопкой) корзины:

<div className="shopping-cart" onClick={() => navigate("/cart")}>   <ShoppingCart id="cartIcon" />   <p>{getTotalItems() || 0}</p> </div>

Страница корзины

На странице корзины из состояние извлекаются товары, добавленные в корзину:

// pages/Cart.js const cart = useCartStore(({ cart }) => cart);

Товары используются для рендеринга соответствующих карточек:

<div>   <h3>Shopping Cart</h3>   {cart.map((i) => (     <CartItem key={i.id} {...i} />   ))} </div>

Карточка товара на главной странице

В карточке товара для главной странице из состояния извлекается метод для добавления товара в корзину:

// components/Item.js const addToCart = useCartStore(({ addToCart }) => addToCart);

Данный метод можно мемоизировать следующим образом:

const addItem = useCallback(() => {   addToCart({ id, title, image, price }); }, []);

Вызывается он при нажатии соответствующей кнопки:

<button onClick={addItem}>Add to Cart</button>

Карточка товара на странице корзины

В карточке товара для страницы корзины из состояния извлекаются методы для удаления товара из корзины, увеличения и уменьшения количества товаров, находящихся в корзине:

// components/CartItem.js const { incrementQuantity, decrementQuantity, removeItem } = useCartStore(   ({ incrementQuantity, decrementQuantity, removeItem }) => ({     incrementQuantity,     decrementQuantity,     removeItem,   }) );

Данные методы вызываются при нажатии соответствующих кнопок:

<div className="cartItem">   <img className="cartItem__image" src={image} alt="item" />    <div className="cartItem__info">     <p className="cartItem__title">{title}</p>     <p className="cartItem__price">       <small>$</small>       <strong>{price}</strong>     </p>     <div className="cartItem__incrDec">       <button         onClick={() => {           if (quantity === 1) return;           decrementQuantity(id);         }}       >         -       </button>       <p>{quantity}</p>       <button onClick={() => incrementQuantity(id)}>+</button>     </div>     <button       className="cartItem__removeButton"       onClick={() => removeItem(id)}     >       Remove     </button>   </div> </div>

Статистика

В компоненте статистики из состояния извлекаются методы для получения общего количества и стоимости товаров, находящихся в корзине:

// components/Total.js const { getTotalQuantity, getTotalPrice } = useCartStore(   ({ getTotalQuantity, getTotalPrice }) => ({     getTotalQuantity,     getTotalPrice,   }) );

Данные методы вызываются для рендеринга соответствующих данных:

<p className="total__p">   total ({getTotalQuantity()} items) :{" "}   <strong>${getTotalPrice()}</strong> </p>

Таким образом, мы видим, что управлять состоянием приложения с помощью Zustand гораздо проще, чем с помощью Redux. Для реализации корзины товаров требуется в 3 раза меньше кода.

Хранение состояния в localStorage

Для хранения состояния в localStorage с помощью Zustand достаточно обернуть функцию обратного вызова, передаваемую в create(), в посредник persist, указав ключ и используемое хранилище:

import { persist } from "zustand/middleware";  const useCartStore = create(   persist(     (set, get) => ({       // ...     }),     {       name: "cart-storage",       getStorage: () => localStorage,     }   ) );

Готово.

Сравнение производительности

Immer, встроенный в Redux Toolkit, делает его чудовищно медленным. Проведем небольшой эксперимент.

Для чистоты эксперимента удалим весь код, связанный с хранением состояния в localStorage.

Определим функции для добавления 2500 товаров в хранилище:

// redux // src/App.js // ... import { addToCart } from "./redux/cartSlice";  function App() {   const dispatch = useDispatch();    const addToCart2500Items = () => {     const times = [];     let id = 0;     for (let i = 0; i < 25; i++) {       const start = performance.now();       for (let j = 0; j < 100; j++) {         const item = {           id: id++,           title: "title",           image: "image",           price: "price",         };         // !         dispatch(addToCart(item));       }       const difference = performance.now() - start;       times.push(difference);     }     const time = Math.round(times.reduce((a, c) => (a += c), 0) / 25);     console.log("Time:", time);   };    // вызываем функцию после полной загрузки страницы   useEffect(() => {     window.addEventListener("load", addToCart2500Items);      return () => {       window.removeEventListener("load", addToCart2500Items);     };   }, []);    // ... }

// zustand // ... import useCartStore from "./store/cart";  function App() {   const addToCart = useCartStore(({ addToCart }) => addToCart);    const addToCart2500Items = () => {     const times = [];     let id = 0;     for (let i = 0; i < 25; i++) {       const start = performance.now();       for (let j = 0; j < 100; j++) {         const item = {           id: id++,           title: "title",           image: "image",           price: "price",         };         // !         addToCart(item);       }       const difference = performance.now() - start;       times.push(difference);     }     const time = Math.round(times.reduce((a, c) => (a += c), 0) / 25);     console.log("Time:", time);   };    useEffect(() => {     window.addEventListener("load", addToCart2500Items);      return () => {       window.removeEventListener("load", addToCart2500Items);     };   }, []);    // ... }

Получаем следующие средние значения (на вашей машине эти значения, скорее всего, будут немного отличаться):

• Zustand — 10 мс;
• Redux — 250 мс.

Внимание: для добавления в хранилище 2500 товаров Redux требуется (sic!) в 25 раз больше времени, чем Zustand.

Обновление и удаления товаров дают аналогичные результаты. Полагаю, цифры говорят сами за себя.

Что насчет размера пакетов? — спросите вы. Пожалуйста:

Это все, чем я хотел поделиться с вами в данной заметке. Надеюсь, вы нашли для себя что-то интересное и не зря потратили время. Благодарю за внимание и happy coding!

---