Proposal: Improve the Zustand store by using the slice pattern and a context provider

[drikusroor]

Problems & solutions
The Zustand stores currently work fine as they are. We have multiple stores for multiple entities. However, there is one direct issue and one potential future issue that I'd like to address.

The first issue is that some storybook stories (MatchingPairs for example) do not work anymore as they rely on the store. It would be nice if we could add a context provider to the store that we could use in the stories to supply them with a store and its values and methods.

The second potential issue is that we might need more logic that relies on multiple store entities. Currently, the stores are separate, which means they cannot access each others' data. A nice way to combine the stores into one global store, while still keeping the entities/logic separate, is to use the slice pattern. A benefit of this is that we can move important shared functions to the store instead of having them in components. An added benefit is that a component that relies on multiple stores/slices now only has to import a useStore function instead of three different stores (useErrorStore, useParticipantStore, and useSessionStore), like in the Playlist component for example.

[BeritJanssen]

That sounds like a good idea indeed!

[BeritJanssen]

Perhaps we should also look into using the dedicated React hook to get updates about external stores.

[drikusroor]

Perhaps we should also look into using the dedicated React hook to get updates about external stores.

I also see this thing about subscribing or reacting to changes in Zustand's docs. Perhaps we can also look into that when making a decision.