spacefold
Use Pub/Sub pattern inside your React applications easily
spacefold
Use Pub/Sub pattern inside your React applications easily!
Table of content
Demo
Like always, a counter as a demo: Counter Demo
Why
React has a declarative API and a unidirectional data flow, this is beatiful and changes a lot the way we write our frontend application, in fact, this changes everything. But, like a lot of things, React has good and bad parts. One of the bad ones, is that sometimes just make a simple communication between modules (internal or external), became hard to do that using props or states and in a lot of cases you will need a context/provider, some state management library or - in worst cases - prop dilling.
Because of that I've beeing used a very simple implementation of an old pattern called Pub/Sub inside my application when I have this type of problem.
Disclaimer
This is not intended to replace your state management library or something else. Use this with caution or you can became your system very hard to debug.
Usage
- Small. 1.3kb minified!
- Extremely Simple. Just publishers and subscribers like old ways
Install as project dependency:
$ yarn add spacefold
Now you can start to create your publishers and subscribers
import { useState } from "react";
import { pub, sub, useSub } from "spacefold";
const inc = pub<number>();
const dec = pub<number>();
const counterSub = sub({
register: [inc, dec] // You need to register which events your subscriber accept
});
const Counter = () => {
const [state, setState] = useState(0);
const sub = useSub(counterSub);
sub.on(inc, (num) => {
setState(state + num);
});
sub.on(dec, (num) => {
setState(state - num);
});
return <div>{state}</div>;
};
const Decrement = () => (
<button onClick={() => dec.send(2)}>dec</button>
);
const Increment = () => (
<button onClick={() => inc.send(2)}>inc</button>
);
export const App = () => (
<div>
<Counter />
<Increment />
<Decrement />
</div>
);
Yes, simple as that, just a subscriber and a publisher!
Contribute
