State sharing
Definition by key
By default, any state you create by the library is shared and will be accessible from your whole application without tuning or configuration.
State instances are defined by their key
, it is its unique name. So as long
as you provide the same key, the same state is used all over your application
for the default behavior.
Having this said, the following just works
It just works!
import { useAsync } from "react-async-states";
function ComponentA() {
let { state, source: { setState } } = useAsync("tracker");
return (
<div>
<span>State Value is: {state.data}</span>
<button onClick={() => setState("A")}>set A</button>
</div>
);
}
function ComponentB() {
let { state, source: { setState } } = useAsync("tracker");
return (
<div>
<span>State Value is: {state.data}</span>
<button onClick={() => setState("B")}>set B</button>
</div>
);
}
export default function App() {
return (
<>
<ComponentA />
<hr />
<ComponentB />
</>
);
}
Test it here
Creating sources
There is another effective way to define your states and make them accessible
from the whole application: The Source
.
The source object is reference to your state that allows you to manipulate it and have control over it from anywhere.
const source = createSource("state-name", producer, configuration);
It is so powerful in the sense that you can create module level sources and
export them, useAsync
and all the hooks provided by the library understand
this object for faster subscription into your components.
For example, we can create and export the source and the utilities function that will operate on it. Let's take the classic counter example:
import { createSource } from "react-async-states";
export const counter = createSource("counter", null, { initialValue: 0 });
export function reset() { ... }
export function increment() { ... }
export function decrement() { ... }
The same applies for all types of producers and all configs.