React Communication Between Components Not-related Components
Example
The only way if your components does not have a parent-child relationship (or are related but too further such as a grand grand grand son) is to have some kind of a signal that one component subscribes to, and the other writes into.
Those are the 2 basic operations of any event system: subscribe/listen to an event to be notify, and send/trigger/publish/dispatch a event to notify the ones who wants.
There are at least 3 patterns to do that. You can find a comparison here.
Here is a brief summary:
-
Pattern 1: Event Emitter/Target/Dispatcher: the listeners need to reference the source to subscribe.
- to subscribe:
otherObject.addEventListener('click', () => { alert('click!'); }); - to dispatch:
this.dispatchEvent('click');
- to subscribe:
-
Pattern 2: Publish/Subscribe: you don't need a specific reference to the source that triggers the event, there is a global object accessible everywhere that handles all the events.
- to subscribe:
globalBroadcaster.subscribe('click', () => { alert('click!'); }); - to dispatch:
globalBroadcaster.publish('click');
- to subscribe:
-
Pattern 3: Signals: similar to Event Emitter/Target/Dispatcher but you don't use any random strings here. Each object that could emit events needs to have a specific property with that name. This way, you know exactly what events can an object emit.
- to subscribe:
otherObject.clicked.add( () => { alert('click'); }); - to dispatch:
this.clicked.dispatch();
- to subscribe:
