Шина событий в React?

В случае двух родственных компонентов вы должны сохранить состояние в родительском компоненте и передать это состояние в качестве опоры обоим братьям и сестрам:

class ParentComponent extends Component {
  state = {
   specialProp: "bar"
  }

  changeProp = () => {
   // this.setState.. 
  }
  render() {
    return (
      <div>
        <FirstSibling specialProp = {this.state.specialProp} />
        <SecondSibling changeProp = {this.changeProp} specialProp = {this.state.specialProp} />
      </div>
    );
  }
}

Родительский компонент может управлять state и методами, используемыми дочерними компонентами, при передаче через props.

В следующем примере счетчик увеличивается. SibOne отображает счетчик, а кнопка в SibTwo увеличивает счетчик.

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0
        };
    }
    incrementCount = () => {
        this.setState({
            count: this.state.count + 1
        });
    }
    render() {
        return (
            <div className = "App">
                <SibOne count = {this.state.count}/>
                <SibTwo incrementCount = {this.incrementCount}/>
            </div>
        );
    }
}

const SibOne = props => <div>Count: {props.count}</div>;

const SibTwo = props => (
    <button onClick = {props.incrementCount}>
        Increment Count
    </button>
);

Демо: https://codesandbox.io/s/zqp9wj2n63

Подробнее о Компоненты и реквизит: https://reactjs.org/docs/components-and-props.html

Шина событий - это только регистр глобальной функции, можете ли вы его использовать?

class _EventBus {

    constructor() {
        this.bus = {};
    }

    $off(id) {
       delete this.bus[id];
    }

    $on(id, callback) {
        this.bus[id] = callback;
    }

    $emit(id, ...params) {
        if (this.bus[id])
            this.bus[id](...params);
    }
}

export const EventBus = new _EventBus();

export const предотвращает множественные экземпляры, делая класс статическим.

rxjs - еще один вариант, который вы можете изучить. проверьте, может ли это помочь вам, поскольку они предоставляют наблюдаемые и основанные на событиях программы. Он также делает то же самое, что и Eventbus в vuejs.

Для тех, кто все еще ищет, посмотрите эту статью: https://www.pluralsight.com/guides/how-to-communicate-between-independent-components-in-reactjs

В решении используются:

document.addEventListener для $on;

document.dispatchEvent для $emit;

document.removeEventListener для $off;

В моем случае использования у меня был компонент, содержащий кнопку «Обновить», которая запускала обновление данных в других компонентах.

Все сделал так, как было написано в статье. Если вы используете React с функциональными компонентами, вы можете использовать следующий useEffect:

  useEffect(() => {
    // The component might unmount when the request is in progress.
    // Because of this an error will appear when we'll try to 'setData'.
    let isMounted = true

    const getData = () => {
      reqData(db, path)
        .then(result => {
          if (isMounted) {
            setData(result) // This is a useState
          }
        })
    }

    eventBus.on('refreshData', (data) => {
      getData()
    })

    getData()

    return () => {
      isMounted = false
      eventBus.remove('refreshData')
    }

    // Do not change the end of this useEffect. Keep it as it is. It simulates componentDidMount.
    // eslint-disable-next-line
  }, [])