Интеграция с внешними библиотеками состояния

Inferno — высокопроизводительный JavaScript-фреймворк для построения пользовательских интерфейсов. Несмотря на встроенную поддержку локального состояния компонентов через useState и Component.state, в сложных приложениях часто требуется интеграция с внешними библиотеками управления состоянием, такими как Redux, MobX или Zustand. Такая интеграция позволяет централизованно управлять состоянием, синхронизировать данные между компонентами и облегчает масштабирование приложений.

Подключение Redux к Inferno

Redux предоставляет глобальный стор, позволяющий хранить состояние приложения в одном месте. Для работы с Inferno используется библиотека inferno-redux, которая обеспечивает связку компонентов с Redux Store.

Установка зависимостей:

npm install redux react-redux inferno-redux

Создание Redux Store:

import { createStore } from 'redux';

const initialState = {
  count: 0
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
}

const store = createStore(reducer);
export default store;

Подключение к Inferno-компоненту:

import { Provider, connect } from 'inferno-redux';
import store from './store';

function Counter({ count, increment, decrement }) {
  return (
    <div>
      <p>Count: {count}</p>
      <button onCl ick={increment}>+</button>
      <button onCl ick={decrement}>-</button>
    </div>
  );
}

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

const mapDispatchToProps = dispatch => ({
  increment: () => dispatch({ type: 'INCREMENT' }),
  decrement: () => dispatch({ type: 'DECREMENT' })
});

const ConnectedCounter = connect(mapStateToProps, mapDispatchToProps)(Counter);

// Использование в приложении
import { render } from 'inferno';
render(
  <Provider store={store}>
    <ConnectedCounter />
  </Provider>,
  document.getElementById('app')
);

Особенности работы с Redux в Inferno:

Используется connect для подписки на изменения состояния.
Обновления состояния происходят через диспатчинг экшенов.
Компоненты автоматически ререндерятся при изменении подключённой части состояния.

Интеграция с MobX

MobX основан на реактивном программировании и предоставляет механизм автоматической подписки компонентов на изменения состояния. В Inferno используется библиотека inferno-mobx для упрощения интеграции.

Установка зависимостей:

npm install mobx mobx-react-lite inferno-mobx

Создание наблюдаемого состояния:

import { makeAutoObservable } from 'mobx';

class CounterStore {
  count = 0;

  constructor() {
    makeAutoObservable(this);
  }

  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }
}

const counterStore = new CounterStore();
export default counterStore;

Подключение к компоненту Inferno:

import { observer } from 'inferno-mobx';
import counterStore from './counterStore';

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

import { render } from 'inferno';
render(<Counter />, document.getElementById('app'));

Ключевые моменты при работе с MobX:

Компоненты автоматически подписываются на изменения наблюдаемых данных.
Нет необходимости вручную диспатчить действия, достаточно вызывать методы состояния.
observer оборачивает компонент, делая его реактивным.

Использование Zustand с Inferno

Zustand — лёгкая библиотека для управления состоянием с минимальным API. Она хорошо подходит для небольших и средних приложений.

Установка:

npm install zustand

Создание хранилища:

import create from 'zustand';

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

export default useStore;

Использование в компоненте Inferno:

import useStore from './store';

function Counter() {
  const { count, increment, decrement } = useStore();
  return (
    <div>
      <p>Count: {count}</p>
      <button onCl ick={increment}>+</button>
      <button onCl ick={decrement}>-</button>
    </div>
  );
}

import { render } from 'inferno';
render(<Counter />, document.getElementById('app'));

Особенности интеграции:

Нет необходимости в провайдерах, как в Redux.
Компоненты автоматически обновляются при изменении состояния.
API минималистичное и простое для освоения.

Интеграция с внешними библиотеками состояния

Подключение Redux к Inferno

Интеграция с MobX

Использование Zustand с Inferno

Рекомендации по выбору подходящей библиотеки