State value reset between page transitions in Next.js with Redux Toolkit and Next Redux Wrapper

[khainv198]

Describe the bug

When using Next.js, Redux Toolkit, and Next Redux Wrapper, there is an issue with preserving the counter value between page transitions.

To Reproduce

It is strongly recommended to fork the CodeSandbox template here and create a reproducible case. It will greatly speed up debugging.

Steps to reproduce the behavior:

1. Go to 'test-1' page.
2. Increase the counter value to 3.
3. Click on a link to navigate to the 'test-2' page.
4. Notice that the counter value is reset to its initial state.

Expected behavior

I expected the counter value to remain unchanged when navigating from the 'test-1' page to the 'test-2' page.

Demo Link

A demo showcasing the issue can be found here.

Screenshots

If applicable, add screenshots to help explain the problem.

Desktop (please complete the following information):

• OS: [e.g. Windows 10]
• Browser: [e.g. Chrome, Firefox]
• Version: [e.g. 92.0.4515.159]

Additional context

Add any other relevant context about the problem here.

[BogiKay]

Currently, in your reducer you're overwriting client state with server one. In this specific scenario it's enough to replace the order of arguments that you're spreading while merging states. In other cases you might need to implement more complex logic of merging client and server states.