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

Stencil — это мощный инструмент для создания веб-компонентов, который позволяет разрабатывать реактивные и производительные пользовательские интерфейсы. В этой статье рассмотрены способы интеграции Stencil с популярными состояниями управления, такими как Redux и MobX, для организации эффективного взаимодействия с глобальным состоянием приложения.

Интеграция Stencil с Redux

Redux — это популярная библиотека для управления состоянием приложения в JavaScript. Используется в проектах с React, но может быть интегрирован и в Stencil. Для этого необходимо наладить взаимодействие между компонентами Stencil и хранилищем состояния Redux.

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

Для начала необходимо установить Redux и связанные с ним библиотеки. Это можно сделать с помощью npm:

npm install @reduxjs/toolkit react-redux

Stencil, как и другие библиотеки, работает с хранилищем Redux, используя react-redux для связывания компонентов с состоянием.

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

Прежде чем интегрировать Stencil с Redux, нужно создать хранилище (store). Для этого используется стандартная структура Redux с редьюсерами, экшенами и состоянием.

Пример редьюсера для состояния:

const initialState = { count: 0 };

function counterReducer(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;
  }
}

Создание хранилища с использованием @reduxjs/toolkit:

import { configureStore } from '@reduxjs/toolkit';

const store = configureStore({
  reducer: {
    counter: counterReducer
  }
});
Шаг 3: Подключение компонента Stencil к Redux

Чтобы связать компонент Stencil с хранилищем Redux, используется библиотека react-redux. Для этого необходимо обернуть приложение в Provider и передать хранилище.

import { h, Component } from '@stencil/core';
import { Provider } from 'react-redux';
import { store } from './store';

@Component({
  tag: 'counter-component',
  shadow: true
})
export class CounterComponent {

  render() {
    return (
      <Provider store={store}>
        <div>
          <h1>Счётчик: </h1>
          <stencil-redux-counter />
        </div>
      </Provider>
    );
  }
}

В компоненте counter-component использован Provider, который передает хранилище в контекст приложения.

Шаг 4: Использование состояния Redux в компоненте Stencil

Для того чтобы использовать состояние из Redux в компонентах Stencil, можно использовать React-совместимые хуки, например, useSelector для извлечения состояния из хранилища.

import { h, Component } from '@stencil/core';
import { useSelector, useDispatch } from 'react-redux';

@Component({
  tag: 'stencil-redux-counter',
  shadow: true
})
export class StencilReduxCounter {

  render() {
    const count = useSelector(state => state.counter.count);
    const dispatch = useDispatch();

    return (
      <div>
        <p>Текущее значение: {count}</p>
        <button onCl ick={() => dispatch({ type: 'INCREMENT' })}>Увеличить</button>
        <button onCl ick={() => dispatch({ type: 'DECREMENT' })}>Уменьшить</button>
      </div>
    );
  }
}

В данном примере компонент получает значение из хранилища с помощью useSelector и отправляет экшены с помощью useDispatch. Это позволяет компоненты Stencil работать с глобальным состоянием Redux.

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

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

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

Для работы с MobX нужно установить библиотеку MobX и MobX-React:

npm install mobx mobx-react
Шаг 2: Создание хранилища

Хранилище в MobX — это объект с наблюдаемыми состояниями, экшенами для изменения этих состояний и вычисляемыми значениями.

Пример хранилища MobX:

import { makeObservable, observable, action } from 'mobx';

class CounterStore {
  count = 0;

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

  increment() {
    this.count += 1;
  }

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

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

В этом примере создается класс хранилища с двумя экшенами increment и decrement, которые изменяют значение счетчика.

Шаг 3: Подключение компонента Stencil к MobX

Для интеграции MobX с компонентами Stencil необходимо использовать механизм реактивности MobX. С помощью декораторов можно наблюдать за состоянием и реагировать на его изменения.

import { h, Component } from '@stencil/core';
import { observer } from 'mobx-react';
import counterStore from './store';

@Component({
  tag: 'counter-component-mobx',
  shadow: true
})
@observer
export class CounterComponentMobX {

  render() {
    return (
      <div>
        <h1>Счётчик: {counterStore.count}</h1>
        <button onCl ick={() => counterStore.increment()}>Увеличить</button>
        <button onCl ick={() => counterStore.decrement()}>Уменьшить</button>
      </div>
    );
  }
}

В данном примере используется декоратор @observer из MobX, который отслеживает изменения состояния в хранилище и обновляет компонент Stencil при изменении данных.

Шаг 4: Реактивность и обновления

С помощью MobX компоненты Stencil автоматически обновляются при изменении наблюдаемых состояний. Когда значение counterStore.count изменяется, MobX инициирует перерисовку компонента, обеспечивая синхронность состояния и представления.

Заключение

Интеграция Stencil с Redux и MobX предоставляет мощные возможности для управления состоянием в современных веб-приложениях. Redux является отличным выбором для крупных и предсказуемых приложений, где важна строгая структура и управление состоянием. MobX же подходит для более реактивных и динамичных приложений, где упор делается на автоматическое обновление интерфейса. Оба подхода обеспечивают гибкость и масштабируемость для разработки сложных веб-решений.

Оглавление