What is it ?
Reactive Event Bus is a typescript publish/subscribe event bus powered with RXJS. Allows to get events data from the past (subscribing after emitting !) and provides options for automatic events unsubscriptions ⭐
Motivation
Imagine having a large scale application containing a lot of components interacting with each other, and we want a way to make your components communicate while maintaining loose coupling and separation of concerns principles. The Event Bus pattern can be a good solution for our problem.
Implementing an Event Bus pattern can be beneficial for our code base as it helps loose coupling your classes and promotes a publish-subscribe pattern. It also help components interact without being aware of each other. Whichever implementation we choose to follow is a matter of taste and requirements. The main idea behind it is that we can connect two objects/two classes that have different lifecycles or a very different hierarchy or items dependency in the simplest way possible. That’s all.
Installation
npm install reactive-event-bus
yarn add reactive-event-bus💻 CodeSandbox Example
https://codesandbox.io/s/nervous-moon-79gh2?file=/src/App.tsx
🚀 Usage
In order to be able to use the methods in our components you should import them from 'reactive-event-bus';
import { on, emit, Subscribe } from 'reactive-event-bus';Registering events
Option 1
on('GetSomethingMessage').subscribe(() => {})Note: on() returns an observable so you pipe any operator on top of the returned observable. on('GetSomethingMessage').pipe(debounceTime(2000))subscribe(() => {})
Option 2
Automagically events unsubscription 🙏 - the good thing about this option is that the developer does not need to handle the unsubscription of the event as it happens with the on().
NOTE: To use this option you must have declared on your component file the lifecycles which will be overriden by the decorator: (React - componentDidMount/componentWillUnmount, Angular - ngOnInit/ngOnDestroy, VanillaCustomElement/StencilJS - connectedCallback/disconnectedCallback).
@Subscribe('GetSomethingMessage')
onGetSomething(config) {
// do something
}Additional options
If we want to just receive the first data of the subscription, there is the option: {once: true}. So after the first subscription, is automatically unsubscribed.
on('GetSomethingMessage', {once: true})).subscribe(() => {})
# or
@Subscribe('GetSomethingMessage', {once: true})
onGetSomething(config) {
// do something
}If we want to subscribe and receive passed events data (emits that happened before subscribe), there is the option: { state: true }.
on('GetSomethingMessage', {state: true})).subscribe(() => {})
# or
@Subscribe('GetSomethingMessage', {state: true})
onGetSomething(config) {
// do something
}If we want to emit the first value and then ignore emitted values for a specified duration, there is the option: { throttleTime: durationTime }.
on('GetSomethingMessage', { throttleTime: 1000 })).subscribe(() => {})
# or
@Subscribe('GetSomethingMessage', { throttleTime: 1000 })
onGetSomething(config) {
// do something
}Dispatching events
emit({ type: 'GetSomethingMessage', data: { something: 'someValue'} })Tests
npm run test
yarn test🤘 Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.