@dhmk/zustand-subscribe-internal v0.0.1
zustand-subscribe-internal
Internal subscription queue for zustand
Installation
npm install @dhmk/zustand-subscribe-internal
Description
Zustand middleware that adds atomic setters and one more notifications queue alongside with subscribe
queue.
In a typical zustand app you have the following algorithm when you call setter function:
- Update state
- Notify listeners attached via
subscribe
function
With this middleware you will have extra steps:
- Update state
- Notify listeners attached via
subscribeInternal
function - If some of listeners call setter, repeat steps 1-2
- Notify listeners attached via
subscribe
function
This might be useful if you want to manage parts of your app state with subscriptions, allowing them to be loosely coupled, while maintaining correct app state at the same time.
Here is an example (although contrived):
Let's say you have a dayModule
, which manages days of the current month. And also you have a monthModule
, which manages months. dayModule
depends on monthModule
and the latter doesn't know about the former.
Let's say we have an app state such as current day is 31 and current month is January.
Now, monthModule
has its setMonth
function called, and the current month is now February. monthModule
can not change dayModule
's current day to any valid day (since 31 February is incorrect), because in our app architecture it doesn't know about that module. So without this middleware dayModule
would have to use standard subscribe
function to change its current day appropriately, but that would result into 2 updates visible to "public" listeners (which are attached using subscribe
function): one with incorrect state and one with correct. This can possibly lead to some bugs further down the road.
Instead, if dayModule
would use subscribeInternal
function, it could set its current day to a valid value, before any "public" listeners would be called. That would result into 1 and only update with correct state.
The point is, this middleware allows you to have multiple internal
states of the app, some of which may be intentionally incorrect, before notifying "public" listeners that the state has changed.
This means that every call of a setter function is now atomic for "public" listeners, i.e. each listener will be called exactly one time during that function. Also, if you want to achieve atomicity between several setter calls, you can use atomic
wrapper function.
API
(default export) subscribeInternal()
Enhances zustand store with several functions:
subscribeInternal(callback: (state, prevState) => void): UnsubscribeFunction
atomic<T>(fn: () => T): T
Example:
const store = createStore(
subscribeInternal((set, get, api) => {
api.subscribeInternal((state, prevState) => {
/* your code here */
});
return {
value: 0,
test() {
// `subscribe` listeners will be called only once at the end of this function
// despite having multiple `set` operations
api.atomic(() => {
set({ value: 1 });
api.atomic(() => {
set({ value: 2 });
});
set({ value: 3 });
});
},
};
})
);
11 months ago