Как при изменении хранилища менять состояние компонента?

В React есть несколько способов изменения состояния компонента при изменении хранилища. Один из наиболее распространенных подходов - это использование библиотеки управления состоянием, такой как Redux или MobX.

Если вы используете Redux, вы можете подписаться на изменения хранилища в компоненте с помощью функции connect, предоставляемой библиотекой react-redux. Эта функция создает обертку вокруг вашего компонента, которая автоматически подписывается на изменения хранилища и передает обновленные данные в качестве свойств компонента. Ваш компонент может получить доступ к этим данным через свойства props и использовать их для обновления своего внутреннего состояния.

Пример кода:

import React, { Component } from 'react';
import { connect } from 'react-redux';

class MyComponent extends Component {
  componentDidMount() {
    // Выполняется при монтировании компонента
    // Подписываемся на изменения хранилища
    this.unsubscribe = this.props.subscribe(() => {
      // Вызывается при каждом изменении хранилища
      // Обновляем состояние компонента при изменении хранилища
      this.setState({ data: this.props.data });
    });
  }

  componentWillUnmount() {
    // Выполняется при размонтировании компонента
    // Отписываемся от изменений хранилища
    this.unsubscribe();
  }

  render() {
    // Рендер компонента с использованием данных из хранилища
    return (
      <div>
        <p>{this.props.data}</p>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  data: state.data // Получаем данные из хранилища
});

export default connect(mapStateToProps)(MyComponent);

Если вы используете MobX, подписка на изменения хранилища происходит автоматически при использовании декоратора observer или функции observer из пакета mobx-react. При изменении данных в хранилище MobX компонент будет обновлен автоматически.

Пример кода:

import React, { Component } from 'react';
import { observer } from 'mobx-react';

@observer
class MyComponent extends Component {
  render() {
    // Рендер компонента с использованием данных из хранилища
    return (
      <div>
        <p>{this.props.store.data}</p>
      </div>
    );
  }
}

export default MyComponent;

Оба подхода позволяют связать состояние компонента с изменениями в хранилище и автоматически обновлять компонент при изменении данных. Выбор между Redux и MobX зависит от ваших предпочтений и требований проекта.