weird initialState of redux-toolkit in next js 13

[vishalkumar2806]

i tried everything as per tutorial and connect my next js 13 with the provider with redux-toolkit but Im getting weird state not the state I defined. My code is exactly like the counter tutorial on react redux documentation. Anyone solution I was expecting a state with a counter variable with a value of zero.

[phryneas]

Take a look at the dropdown in the top right. That is not the internal state of the web site you are building, but the internal state of some "Free Gift Card Generator" - maybe another tab you have open or a browser plugin that injected itself into your site?

[vishalkumar2806]

Yeah thats im building and its correct

[phryneas]

Still, have you checked that dropdown if there are any other stores in there that could actually be your Redux store that you are building? There can sometimes be multiple stores on one page, often accidentally.

[vishalkumar2806]

yes i check there is no other instance working. I generally don't open many tabs

[vishalkumar2806]

you can come to my desktop and fix this thing by yourself

[phryneas]

Did you accidentally import the wrong reducer in your store setup? Possibly from @nextjs/client/components/reducer or a similar place?

Please share your store setup file here, including imports.

[markerikson]

Yeah, that specifically looks like https://github.com/vercel/next.js/blob/4e2267ff61bcee74c26f16ec7675bf29338af141/packages/next/src/client/components/router-reducer/reducers/refresh-reducer.ts#L37 .

That tells me what you're looking at is definitely not your own application code somehow.

[vishalkumar2806]

tree directory

store.tcx

counterReducer.tcx

[markerikson]

Store setup seems fine. Honestly, this just looks like the DevTools are somehow showing something that's not part of your app, and that's not an issue with RTK itself.

I'd double-check to see if there are any other options listed in the "Instances" dropdown menu.

[vishalkumar2806]

okie thankx

[vishalkumar2806]

yes you are correct its showing me the state of next-router now but my instance is not showing when I click the dropdown menu

[mxswat]

I'm having the same issue; it's showing me the next router state

[markerikson]

Folks, whatever's going on here is not actually a Redux Toolkit problem specifically. If anything, it's a Redux DevTools problem.

Your best bet is to file an issue in the Redux DevTools repo, with an app repo that demonstrates this problem happening.

[markerikson]

Short update: Looking at https://github.com/vercel/next.js/commits/canary/packages/next/src/client/components/router-reducer/reducers/refresh-reducer.ts , it does look like the Next folks have been working on this file recently. Per https://github.com/vercel/next.js/blob/0d7f7653e81a4f2aa16be7ead286e09b22761f52/packages/next/src/client/components/app-router.tsx#L32 , they also have a useReducerWithReduxDevtools hook that may be related.

I've asked them if they made any recent changes that might be affecting the DevTools, but overall this looks like it's a Next-related bug.

[markerikson]

Update: confirmed that this is a Next bug. They tried to wrap useReducer to talk to the Redux DevTools, but hardcoded the instanceId:

https://github.com/vercel/next.js/blob/0d7f7653e81a4f2aa16be7ead286e09b22761f52/packages/next/src/client/components/use-reducer-with-devtools.ts#LL144-L149C6

I've passed along a suggestion to have them fix that and call the Redux DevTools connect() method correctly.