Menu

1 / 2

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

DEV Community·Srinu Web developer·6 months ago
#A83D0bs7
#nextjs#microfrontend#redux#store#remote
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 ` .…

Continue reading — create a free account

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