Перейти к содержимому
шпаргалка.
Esc
↑↓навигация↵открыть⌘Jпредпросмотр
На этой странице

Управление состоянием

Все темы React Developer

Какие популярные библиотеки для управления состоянием вы знаете, помимо встроенного useState?

Популярные библиотеки для управления состоянием в React:

  1. Redux:

    • Централизованное хранилище состояния с предсказуемым поведением.

    • Пример использования:

      import { createStore } from 'redux';
import { Provider } from 'react-redux';

  2. MobX:

    • Реактивное управление состоянием с фокусом на наблюдаемых данных и реакциях.

    • Пример использования:

      import { observable } from 'mobx';
import { observer } from 'mobx-react';

  3. Recoil:

    • Recoil использует атомы и селекторы, но его репозиторий архивирован в январе 2025 года. Это исторический пример, а не рекомендация для нового проекта.

    • Пример использования:

      import { RecoilRoot, atom, useRecoilState } from 'recoil';

  4. Zustand:

    • Легковесная и гибкая библиотека для управления состоянием.

    • Пример использования:

      import { create } from 'zustand';

  5. Context API:

    • Встроенный механизм для управления глобальным состоянием с помощью контекста.

    • Пример использования:

      import { createContext, useContext } from 'react';

Помимо встроенного useState, для управления состоянием в React популярны библиотеки Redux, MobX, Recoil, Zustand, а также встроенный Context API.

Какие паттерны использования Redux вы знаете?

Паттерны использования Redux:

  1. Действия (Actions):

    • Описывают изменения состояния через типы и полезную нагрузку.

    • Пример:

      const increment = () => ({ type: 'INCREMENT' });

  2. Редьюсеры (Reducers):

    • Функции, которые описывают, как состояние изменяется в ответ на действия.

    • Пример:

      const counter = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    default:
      return state;
  }
};

  3. Хранилище (Store):

    • Хранит состояние приложения и предоставляет методы для доступа к состоянию и отправки действий.

    • Пример:

      import { createStore } from 'redux';
const store = createStore(counter);

  4. Контейнерные компоненты (Container Components):

    • Соединяют компоненты React с Redux-хранилищем с помощью connect.

    • Пример:

      import { connect } from 'react-redux';

const mapStateToProps = (state) => ({ count: state });
const mapDispatchToProps = { increment };

export default connect(mapStateToProps, mapDispatchToProps)(CounterComponent);

  5. Thunk Middleware:

    • Позволяет писать действия, которые возвращают функции вместо объектов, для работы с асинхронными операциями.

    • Пример:

      import { thunk } from 'redux-thunk';
import { applyMiddleware, createStore } from 'redux';

const store = createStore(rootReducer, applyMiddleware(thunk));

  6. Селекторы (Selectors):

    • Функции для выборки данных из состояния, повышают читаемость и повторное использование кода.

    • Пример:

      const getCount = (state) => state.counter;

Популярные паттерны использования Redux включают действия, редьюсеры, хранилище, контейнерные компоненты, thunk middleware и селекторы. Эти паттерны помогают структурировать и управлять состоянием приложения эффективно.

Какие альтернативы Redux для управления состоянием в React-приложениях?

Альтернативы Redux для управления состоянием в React-приложениях:

  1. MobX:

    • Реактивное управление состоянием с акцентом на наблюдаемые данные и автоматические реакции.

    • Пример:

      import { observable, action } from 'mobx';
import { observer } from 'mobx-react';

  2. Recoil:

    • Recoil использует атомы и селекторы, но его репозиторий архивирован в январе 2025 года. Это исторический пример, а не рекомендация для нового проекта.

    • Пример:

      import { RecoilRoot, atom, useRecoilState } from 'recoil';

  3. Zustand:

    • Легковесная и гибкая библиотека для управления состоянием.

    • Пример:

      import { create } from 'zustand';
const useStore = create(set => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 }))
}));

  4. Context API:

    • Встроенный механизм для управления глобальным состоянием с помощью контекста.

    • Пример:

      import { createContext, useContext, useState } from 'react';
const MyContext = createContext();
const MyProvider = ({ children }) => {
  const [state, setState] = useState(0);
  return <MyContext.Provider value={{ state, setState }}>{children}</MyContext.Provider>;
};

  5. XState:

    • Управление состоянием с использованием конечных автоматов и диаграмм состояний.

    • Схематичный пример старого API XState 4. В XState 5 используют createMachine или setup; useMachine вызывают внутри компонента или пользовательского хука:

      import { Machine } from 'xstate';
import { useMachine } from '@xstate/react';
const toggleMachine = Machine({ /* состояние машины */ });
const [state, send] = useMachine(toggleMachine);

  6. React Query:

    • Специализируется на управлении состоянием данных, извлекаемых из серверов.

    • Пример для React Query 3; useQuery вызывается внутри компонента или пользовательского хука. В TanStack Query 5 используется объект параметров:

      import { useQuery } from 'react-query';
const { data, error, isLoading } = useQuery('data', fetchData);

Альтернативы Redux для управления состоянием в React-приложениях включают MobX, Recoil, Zustand, Context API, XState и React Query. Эти библиотеки и инструменты предлагают разные подходы и функциональные возможности для управления состоянием.

Эта страница была полезной?