Does this package only persist one state value from the store?

[benripka]

I'd like to be able to read and modify multiple pieces of state from different contexts, such as tabs, and have any modifications to the store be persisted to storage and synced across all active contexts. I thought that was the purpose of this package, but it does not seem to work for the following setup:

import { create } from "zustand";
import { persistNSync } from "persist-and-sync";

interface MyStoreType {
	count: number;
	count2: number;
	incrementCount: () => void;
	incrementCount2: () => void;
}

export const useMyStore = create<MyStoreType>()(
	persistNSync(
		set => ({
			count: 0,
			count2: 0,
			incrementCount: () => {
				set(state => ({ ...state, count: state.count + 1 }));
			},
			incrementCount2: () => {
				set(state => ({ ...state, count2: state.count2 + 1 }));
			},
		}),
		{ name: "shared_counts", storage: "localStorage" },
	),
);

When one tab calls incrementCount() the state of count2 is cleared from the local store. Thus on refresh of one or both tabs, the store is rehydrated and count2 is 0. Is this expected? Perhaps only one context is able to mutate the stores state?

If so are there any reasonable means of achieving the type of "complete synchronization" of state between tabs where each tab can execute actions upon the state and have the resulting state mutations also apply to the persisted store AND in-memory state of the other contexts using the shared store?

I can make it work if I use something more like:

import { create } from "zustand";
import { persistNSync } from "persist-and-sync";

interface MyStoreType {
	count_state: {
		count: number;
		count2: number;
	};
	incrementCount: () => void;
	incrementCount2: () => void;
}

export const useMyStore = create<MyStoreType>()(
	persistNSync<MyStoreType>(
		(set, get) => ({
			count_state: {
				count: 0,
				count2: 0,
			},
			incrementCount: () =>
				set(state => ({
					count_state: { ...state.count_state, count: state.count_state.count + 1 },
				})),
			incrementCount2: () =>
				set(state => ({
					count_state: { ...state.count_state, count2: state.count_state.count2 + 1 },
				})),
		}),
		{ name: "shared_counts", storage: "localStorage" },
	),
);

But by doing this we lose the ability to use more fine-grained selectors, and need to instead select the entire state during every read / update. Maybe this is unavoidable though? Any thoughts would be appreciated, and If I am misunderstanding how the package (or zustand in general) works, corrections are welcome. I am rather new to Zustand. Thanks.

Upvote & Fund

• We're using Polar.sh so you can upvote and help fund this issue.
• We receive the funding once the issue is completed & confirmed by you.
• Thank you in advance for helping prioritize & fund our backlog.