Make a store reactive to changes in another store

[feederaccount]

I have two stores that I am not even sure should be two separate stores. One holds settings entered by the user and the other is the actual state variables being manipulated.

I have split them into two stores just to reduce the size of the store. Keeping things small has always worked for me but I am not sure if this goes against the intended use of Zustand.

So, I have this config store:

export const useConfigStore = create<ConfigStoreState>((set) => ({
	selectedUserId: undefined,
	setSelectedUserId: (userId: string) => {
		set(
			produce((draft) => {
				draft.selectedUserId = userId;
			})
		);
	},
	// ...other stuff here
}));

...and I have this store, where I want the selected userPermissionsForCurrentUser to update whenever the selectedUserId changes:

export const usePermissionsStore = create<PermissionsStoreState>((set) => ({
	userPermissions: [],
	userPermissionsForCurrentUser: undefined,
	setUserPermissionsForCurrentUser: (...) => { /* code here*/ }, // I'd like to get rid of this
	// ...other stuff here
}));

The userPermissionsForCurrentUser is just a single object from the userPermissions array. Right now I have a useEffect in a component that listens for changes to the selectedUserId:

const selectedUserId = useConfigStore((state) => state.selectedUserId);
const userPermissions= usePermissionsStore((state) => state.userPermissions);
const setUserPermissionsForCurrentUser= usePermissionsStore((state) => state.setUserPermissionsForCurrentUser);

useEffect(() => {
	const res = userPermissions.filter(x => x.userId === selectedUserId);
	if(res) {
		setUserPermissionsForCurrentUser(res);
	}
}, [selectedUserId])

..but ideally this would happen in the store itself rather than in some random component. Is there a way to link these two?

[dai-shi]

Zustand is unopinionated, and you can do what you can do.
You could use .subscribe() instead of useEffect.

That said, Zustand is not designed for coordinating multiple stores. So, in general, a single big store is preferred, if such coordination is required, like changing both things at once.

If you prefer keeping things small, you may want to try https://github.com/pmndrs/jotai or https://github.com/pmndrs/valtio.

btw, I have an experimental project derive-zustand, but it may not fit your needs.