Menu

Post image 1
Post image 2
1 / 2
0

Shared Redux Store in Next.js Module Federation: Cross-Remote State

DEV Community·Srinu Web developer·about 1 month ago
#A83D0bs7
#nextjs#microfrontend#redux#store#remote#next
Reading 0:00
15s threshold

// Auth React remote dispatches: dispatch ( setIsLoggedIn ({ isLoggedIn : true })) // Products Next.js remote reads: const isLoggedIn = useAppSelector ( selectIsLoggedIn ) // → returns FALSE Enter fullscreen mode Exit fullscreen mode You log in. Cart still says you didn't. If you've built a hybrid micro frontend with React remotes (ModuleFederationPlugin) loaded inside a Next.js host (NextFederationPlugin), you have either hit this bug or you will. Open Redux DevTools and you'll see two store instances — one created by the Auth remote, one created by Products. Each remote dispatched into its own copy. The contract that fixes it A federated Redux singleton. One @myapp/store package. The host imports it once, creates the store, wraps the app in ` . Every remote imports useSelector and useDispatch` from that same package, and Module Federation guarantees they all receive the host's instance — not a fresh one.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More