JStates for React.js
A subscribe function to and a useSubscribe hook use JStates state library
Install
npm i -S jstates-react
Usage
Creating a state instance
// counterState.js
import { createState } from "jstates-react";
const counterState = createState({ counter: 0 });
export default counterState;
Making state changes
// Counter.jsx
import counterState from "./counterState";
function Counter() {
return (
<div>
<button
onClick={() => {
counterState.setState(({ counter }) => ({ counter: counter + 1 }));
}}
>
add one +
</button>
<button
onClick={() => {
counterState.setState(({ counter }) => ({ counter: counter - 1 }));
}}
>
remove one -
</button>
<button
onClick={() => {
counterState.setState({ counter: 0 });
}}
>
reset
</button>
</div>
);
}
export default Counter;
Subscribing to state changes
// App.jsx with hooks
import { useSubscribe } from "jstates-react";
import counterState from "./counterState";
import Counter from "./Counter";
function App() {
const { counter } = useSubscribe(counterState);
return (
<div>
<p>Current counter: {counter}</p>
<Counter />
</div>
);
}
export default App;
// App.jsx with HOC
import { subscribe } from "jstates-react";
import counterState from "./counterState";
import Counter from "./Counter";
function App({ states }) {
return (
<div>
<p>Current counter: {states[0].counter}</p>
<Counter />
</div>
);
}
export default subscribe(App, counterState);
useSubscribe
hook
useSubscribe
should be called with one jstates state instance.
Then would get updated whatever changes are made to the state it subscribed to
const someState = createState({ userLikes: "nothing yet" });
function App() {
const { userLikes } = useSubscribe(someState);
return (
<div>
<p>You like: {userLikes}</p>
<button onClick={() => someState.setState({ userLikes: "Monkeys" })}>
Monkeys
</button>
<button onClick={() => someState.setState({ userLikes: "Horses" })}>
Horses
</button>
</div>
);
}
subscribe
HOC Minimal requirement
subscribe
should be called with a component and a state or an array with at least one jstates state instance.
Then would get updated whatever changes are made to the states it subscribed to
const someState = createState({});
subscribe(Component, someState);
// With multiple states
const someOtherState = createState({});
subscribe(Component, [someState, someOtherState]);
mapStatesToProps
subscribe
can be called with an additional function to map the states it subscribes to
into the props of the component. This pattern can be seen also in libraries like react-redux and is easy to test
const mapStatesToProps = (counterState, otherState) => ({
counter: counterState.counter,
someOtherValue: otherState.someOtherValue,
});
function App({ counter, someOtherValue }) {
return (
<div>
<p>Current counter: {counter}</p>
<p>Another value: {someOtherValue}</p>
<Counter />
</div>
);
}
subscribe(App, [counterState, otherState], mapStatesToProps);