Есть ли библиотека для роутинга state manager?

Есть ли библиотека для роутинга и state manager

Краткий ответ: Да, для роутинга и управления состоянием есть множество зарекомендовавших себя библиотек. Самые популярные: React Router (роутинг) + Redux/Zustand/Recoil (state management) для React, и встроенные решения для Vue/Angular.

Библиотеки для роутинга

1. React Router (самая популярная для React)

// package.json
npm install react-router-dom

// App.jsx
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Home from './pages/Home'
import About from './pages/About'
import NotFound from './pages/NotFound'

export function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/users/:id" element={<UserDetail />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  )
}

// Компонент с навигацией
import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
import { Link } from 'react-router-dom'

export function UserDetail() {
  const { id } = useParams()                // Получить параметр из URL
  const [searchParams] = useSearchParams()  // Получить query параметры
  const navigate = useNavigate()            // Программная навигация

  return (
    <div>
      <h1>User {id}</h1>
      <p>Tab: {searchParams.get('tab')}</p>
      
      <Link to={`/users/${id}/edit`}>Edit</Link>
      <button onClick={() => navigate('/')}>Go Home</button>
    </div>
  )
}

2. TanStack Router (современная альтернатива React Router)

// Более типизированный подход к роутингу
import { Router, RootRoute, Route } from '@tanstack/react-router'

const rootRoute = new RootRoute({
  component: Root,
})

const indexRoute = new Route({
  getParentRoute: () => rootRoute,
  path: '/',
  component: Home,
})

const userDetailRoute = new Route({
  getParentRoute: () => rootRoute,
  path: '/users/$id',
  component: UserDetail,
})

const routeTree = rootRoute.addChildren([indexRoute, userDetailRoute])
const router = new Router({ routeTree })

export function App() {
  return <RouterProvider router={router} />
}

3. Vue Router (встроенное решение для Vue)

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/users/:id', component: UserDetail },
  { path: '/:pathMatch(.*)*', component: NotFound }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

<!-- Использование в компоненте -->
<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    
    <router-view />
  </div>
</template>

<script>
import { useRoute, useRouter } from 'vue-router'

export default {
  setup() {
    const route = useRoute()
    const router = useRouter()
    
    const goToUser = (id) => {
      router.push(`/users/${id}`)
    }
    
    return { userId: route.params.id, goToUser }
  }
}
</script>

Библиотеки для State Management

1. Redux (классический подход, verbose но мощный)

// store/counterSlice.js
import { createSlice } from '@reduxjs/toolkit'

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

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

// store/index.js
import { configureStore } from '@reduxjs/toolkit'
import counterReducer from './counterSlice'

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

export default store

// App.jsx
import { Provider } from 'react-redux'
import store from './store'
import Counter from './Counter'

export function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  )
}

// Counter.jsx
import { useDispatch, useSelector } from 'react-redux'
import { increment, decrement, incrementByAmount } from './store/counterSlice'

export function Counter() {
  const count = useSelector((state) => state.counter.value)
  const dispatch = useDispatch()

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
      <button onClick={() => dispatch(incrementByAmount(5))}>+5</button>
    </div>
  )
}

2. Zustand (простой и лёгкий, популярный выбор сейчас)

// store/counterStore.js
import { create } from 'zustand'

export const useCounterStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 })
}))

// Counter.jsx
import { useCounterStore } from './store/counterStore'

export function Counter() {
  const count = useCounterStore((state) => state.count)
  const increment = useCounterStore((state) => state.increment)
  const decrement = useCounterStore((state) => state.decrement)

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  )
}

// Альтернативный способ - деструктуризация
export function Counter2() {
  const { count, increment, decrement } = useCounterStore()

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  )
}

3. Recoil (атомарный подход, разработано Meta/Facebook)

// store/atoms.js
import { atom } from 'recoil'

export const counterAtom = atom({
  key: 'counter',
  default: 0
})

export const todoListAtom = atom({
  key: 'todoList',
  default: []
})

// App.jsx
import { RecoilRoot } from 'recoil'
import Counter from './Counter'

export function App() {
  return (
    <RecoilRoot>
      <Counter />
    </RecoilRoot>
  )
}

// Counter.jsx
import { useRecoilState } from 'recoil'
import { counterAtom } from './store/atoms'

export function Counter() {
  const [count, setCount] = useRecoilState(counterAtom)

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
    </div>
  )
}

4. MobX (реактивный подход с декораторами)

// store/counterStore.js
import { makeObservable, observable, action } from 'mobx'

class CounterStore {
  count = 0

  constructor() {
    makeObservable(this, {
      count: observable,
      increment: action,
      decrement: action
    })
  }

  increment() {
    this.count++
  }

  decrement() {
    this.count--
  }
}

export const counterStore = new CounterStore()

// Counter.jsx
import { observer } from 'mobx-react-lite'
import { counterStore } from './store/counterStore'

export const Counter = observer(() => {
  return (
    <div>
      <p>Count: {counterStore.count}</p>
      <button onClick={() => counterStore.increment()}>+</button>
      <button onClick={() => counterStore.decrement()}>-</button>
    </div>
  )
})

5. Pinia (официальная state management для Vue 3)

// stores/counter.js
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubled = computed(() => count.value * 2)

  const increment = () => count.value++
  const decrement = () => count.value--

  return { count, doubled, increment, decrement }
})

<!-- Counter.vue -->
<template>
  <div>
    <p>Count: {{ counter.count }}</p>
    <p>Doubled: {{ counter.doubled }}</p>
    <button @click="counter.increment">+</button>
    <button @click="counter.decrement">-</button>
  </div>
</template>

<script setup>
import { useCounterStore } from '../stores/counter'

const counter = useCounterStore()
</script>

Сравнение State Management библиотек

Комбинация Роутинга + State Management

// Типичная современная архитектура React приложения
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import { Provider } from 'react-redux'
import store from './store'
import Layout from './Layout'
import HomePage from './pages/HomePage'
import UserPage from './pages/UserPage'

export function App() {
  return (
    <Provider store={store}>
      <BrowserRouter>
        <Layout>
          <Routes>
            <Route path="/" element={<HomePage />} />
            <Route path="/users/:id" element={<UserPage />} />
          </Routes>
        </Layout>
      </BrowserRouter>
    </Provider>
  )
}

Когда использовать какое решение

Redux - если:

• Большое приложение с сложным state
• Нужны DevTools и время-travel debugging
• Команда уже знает Redux

Zustand - если:

• Хотите просто и быстро
• Средний размер приложения
• Нравятся минималистичные решения

Recoil - если:

• Асинхронные данные критичны
• Нужна атомарная структура
• Используете современный React (18+)

MobX - если:

• Предпочитаете объектно-ориентированный подход
• Большой бизнес-логики надо управлять

Context API (встроенное в React) - если:

• Маленькое приложение
• State не часто меняется
• Хотите избежать зависимостей

Вывод

Да, существует множество проверенных библиотек:

Для роутинга:

• React Router (самая популярная для React)
• TanStack Router (типизированная альтернатива)
• Vue Router (встроенная для Vue)

Для state management:

• Redux (классический, enterprise)
• Zustand (простой и модный)
• Recoil (атомарный, от Facebook)
• MobX (реактивный)
• Pinia (для Vue)
• Context API (встроенное в React)

Выбор зависит от размера проекта, команды и личных предпочтений. Для новых проектов я обычно выбираю Zustand (для state) + React Router (для роутинга) как оптимальный баланс между простотой и функциональностью.