Zustand vs Redux Toolkit в 2026 | KtoHto

npm install zustand@5.0.0
# или
yarn add zustand@5.0.0

Пример создания стора (src/store/useStore.ts):

import create from 'zustand'

export const useStore = create(set => ({
  count: 0,
  inc: () => set(state => ({ count: state.count + 1 })),
  dec: () => set(state => ({ count: state.count - 1 }))
}))

// В компоненте
const count = useStore(state => state.count)
// при вызове useStore.getState() возвращает {count:0, inc: f, dec: f}
console.log(useStore.getState())
// Вывод в консоли:
// { count: 0, inc: [Function], dec: [Function] }

npm install zustand-middleware@1.2.0
# или
yarn add zustand-middleware@1.2.0

import create from 'zustand'
import { devtools, immer } from 'zustand/middleware'

export const useStore = create(devtools(immer((set) => ({
  todos: [] as {id:number, text:string, done:boolean}[],
  add: (t) => set(draft => { draft.todos.push(t) }),
})), { name: 'app-store-2026' }))

Консоль DevTools: 
Action: add
State before: {todos: []}
State after: {todos: [{id:1,text:'task',done:false}]}

npm install zustand-persist@2.0.0
# или
yarn add zustand-persist@2.0.0

import create from 'zustand'
import { persist } from 'zustand/middleware'

const safeStorage = typeof window !== 'undefined' ? localStorage : { getItem: () => null, setItem: () => undefined }

export const useStore = create(persist(
  (set) => ({ token: null, setToken: (t) => set({ token: t }) }),
  { name: 'auth-2026', getStorage: () => safeStorage }
))

localStorage.getItem('persist:auth-2026')
// -> '{"state":{"token":"abc123\

Zustand vs Redux Toolkit в 2026

Комментарии (0)

Что вы изучите

Требования

Проблема Redux в 2026

Шаг 1: setup Zustand

Шаг 2: middleware

Шаг 3: persistence