reastig v1.3.1
reastig
Event-based state management framework for react applications.
Instalation
NPM: npm install reastig
YARN: yarn add reastig
Idea
- Maintain the application state as a global ordered list of events
- Components can update the global state by sending a message to a topic
- Other components update their local state by subscribing to a topic and calling a reducer function
How it works
Produce a message
To produce a message call the Reastig.send(topic: string, message: any)
method:
import Reastig from "reastig";
Reasting.send("topic-name", { hello: "world" });
Typically, you would do this from inside a component:
import Reastig from "reastig";
import React from "react";
function MyProducerComponent() {
return (
<button onClick={() => Reastig.send("topic-name", { hello: "world" })}>
Click me
</button>
);
}
Consume messages
To consume messages, call the Reastig.consume(topic: string, consumer: (message: any) => void): string
method.
To stop consuming messages, call the Reastig.unsubscribe(topic: string, consumerId: string)
method.
import Reastig from "reastig";
const consumer = message => console.log(message);
const consumerId = Reastig.consume("topic-name", consumer);
// ... if you no longer need the subscription
Reastig.unsubscribe("topic-name", consumerId);
Typically, you would do this from a component:
import Reastig from "reastig";
import React from "react";
class MyComponent extends React.Component {
constructor() {
super();
this.state = {};
}
componentDidMount() {
this.consumerId = Reastig.consume("topic-name", this.consumeMessage);
}
consumeMessage(message) {
// consume the message (typically update component state)
// ...
this.setState(/** new state */);
}
componentWillUnmount() {
Reastig.unsubscribe("topic-name", this.consumerId);
}
render() {
return <div>State: {JSON.stringify(this.state)}</div>;
}
}
Consuming is also available as a react hook:
import { useConsumer } from "reastig";
import React, { useState } from "react";
function MyComponent() {
const [state, setState] = useState({});
const consumer = message => setState(message);
useConsumer("topic-name", consumer);
return <div>State: {JSON.stringify(state)}</div>;
}
Update component state
A component typically consumes message in order to update its internal state with a reducer.
This pattern is available by calling the Reastig.subscribe(component: Component, topic: string, reducer: (oldState: any, message: any) => any)
method.
Where the Component
type's interface matches a react class-based component:
interface Component {
state: any;
setState: (newState: any) => void;
}
React class component subscribe example:
import Reastig from "reastig";
import React from "react";
const reducer = (oldState, message) => {
return {
oldState: oldState,
message: message
};
};
class MyComponent extends React.Component {
constructor() {
super();
this.state = {};
}
componentDidMount() {
this.consumerId = Reastig.subscribe(this, "topic-name", reducer);
}
componentWillUnmount() {
Reastig.unsubscribe("topic-name", this.consumerId);
}
render() {
return <div>State: {JSON.stringify(this.state)}</div>;
}
}
Subscribing is also available as a react hook:
import React from "react";
import { useSubscriber } from "reastig";
function MyComponent() {
const reducer = (oldCount, message) => oldCount + 1;
const count = useSubscriber(0, "topic-name", reducer);
return <div>Count is: {count}</div>;
}
You can subscribe the same state variable to multiple topics:
import React from "react";
import { useSubscribers } from "reastig"; // mind the plural
function MyComponent() {
const reducer1 = (oldCount, message) => oldCount + 1;
const reducer2 = (oldCount, message) => oldCount - 1;
const count = useSubscribers(
0,
["topic-name-1", reducer1],
["topic-name-2", reducer2]
// ... as many as you want
);
return <div>Count is: {count}</div>;
}
Complete example
Check out the examples:
The examples were created with the react-create-app
plugin.
Install the dependencies using npm install
or yarn install
.
Start them with npm start
or yarn start
.