I still haven’t solved a problem despite trying a lot with AI. I’d be glad if you could help.
I’m developing a project in microfrontend architecture with React using Vite. I can’t share the whole code, it’s standard stuff anyway. Let’s talk about the shell app I named host and app1, which I designated as remote, for example. Both have redux-persist, redux and redux-toolkit. I also divided the reducers in each. Each app manages its own store. app1 is wrapped by the host app, that is, it is displayed on a router. For example, it renders at an address like localhost:8000/app1. At this stage, I can expose the store on the host in vite.config.js and use it in app1, and I can access the states on the host.
The problem starts here.
When I create a store in app1 and run the project in “dev” mode while developing (that is, I don’t get a build and render on the host), it can normally operate on its own store. That is, the things I dispatch go to the relevant slices and the data is kept in redux.
However, when I deploy and preview app1, when I render on the host side, that is, when I enter an address like localhost:8000/app1/*, I cannot access the stores in app1. In fact, it is accessible, but the initial data comes. I put a button for testing purposes and dispatched the random numbers in app1’s store, but I cannot see it in app1 rendered on the host. It is still dispatched, but this data does not appear in app1 in the host. There is no error either. In short, I cannot see the statuses of the redux states updated in build/preview and host->app1. I tried to pull it with things like store.getState().application, I tried with useSelector, but it does not work. In fact, it gives an error for useSelector. useRefs error, etc.
As a solution, I tried redux-toolkit, eager for redux and singleton settings in vite.config.js with various variations, but it did not work. If anyone has encountered such a problem before, I expect your help.
If I can’t solve it, I plan to keep app1’s store in a separate slice on the host side and keep it in the shared store exposed as host/store. I can’t think of another solution.
Thanks for reading.
1