I'm currently working on a 3D orthodontic treatment planning software for doctors. The app has one big global store that is split into slices. I also have non-view-specific business logic on the client that is stored in a separate folder (plain Three.js). Both React components and JS module talk to the Zustand store by reading (or subscribing to) state and calling actions. See the simplified diagram below to better understand the details:
Now I need to extend this project and add 4 different apps (or modes) to this project. These apps (modes) are quite similar to each other, but the functionality in each of them is slightly different. They may reuse components, but the data they use is different, so each of these 4 apps (modes) requires its own store (or a bunch of new slices).
This is what I came up with for this new app. This is just a rough sketch.
I'm particularly concerned about this:
- Should I use five different stores (1 for each app and 1 for React components and things that are shared by each of these apps) or split 1 store into even more slices? What are the pros and cons of each approach? Currently, my store is quite huge, and I have around 20 slices. Adding 3 more apps (modes) will make it even bigger. I'm also afraid of name collisions.
- What could be done differently from the architectural side of things? With this approach, I'm not sure if I'll be able to avoid a lot of code repetition with each of these apps (modes).
