next-redux-wrapper | Redux wrapper for Next.js | State Container library

I'm a new Next user and have been using Redux with React for a long time I had a lot of trouble in using Redux with Next

I'm done with this solution

store.js

I use next-redux-wrapper, MSW, @mswjs/data and redux-toolkit for storing my data in a store as well as mocking API calls and fetching from a mock Database.

I have the following scenario happening to me.

1. I am on page /content/editor and in the console and terminal, I can see the data was fetched from the mock database and hydrated from getStaticProps of Editor.js. So now IDs 1 to 6 are inside the store accessible.
2. Now I click on the PLUS icon to create a new project. I fill out the dialog and press "SAVE". a POST request starts, it's pending and then it gets fulfilled. The new project is now in the mock DB as well as in the store, I can see IDs 1 to 7 now.
3. Since I clicked "SAVE" and the POST request was successful, I am being routed to /content/editor/7 to view the newly created project.
4. Now I am on Page [id].js, which also fetched data from the mock DB and then it gets stored and hydrated into the redux store. The idea is, it takes the previous store's state and spreads it into the store, with the new data (if there are any).
5. Now the ID 7 no longer exists. And IDs 1 to 6 also don't exist anymore, instead, I can see in the console and terminal that IDs 8 to 13 were created, and the previous ones are no more.

Obviously, this is not great. When I create a new project and then switch the route, I should be able to access the newly created project as well as the previously created ones. But instead, they all get overwritten.

It either has something to do with the next-redux-wrapper or MSW, but I am not sure how to make it work. I need help with it. I will post some code now:

This is my reducer:

StackBlitz Demo

I follow the setup of redux toolkit for next js in here. However, in the original question's tsconfig.json, compilerOptions.strict = false while mine is true. The issue I got is in store.js. If you look at the demo, when calling configureStore, the reducer has the following issue:

Using redux with SSR in Next.js(Typescript) using next-redux-wrapper, but getting error on this line

async ({ req, store })

Says, Type 'Promise' provides no match for the signature '(context: GetServerSidePropsContext): Promise<{ [key: string]: any; }>>

Property 'req' does not exist on type 'Store & { dispatch: unknown; }'.

Property 'store' does not exist on type 'Store & { dispatch: unknown; }'

Here is my SSR code:-

I'm using RTK (redux-toolkit) inside a Next.js App. And I'm trying to dispatch an AsyncThunk Action inside "getInitialProps". When searching I found a package called "next-redux-wrapper" that exposes the "store" inside "getInitialProps", but I'm struggling to figure out how to make it work with my project.

Here's a barebone sample of the project where I'm using Typescript with 2 reducers at the moment. One reducer is using AsyncThunk to get data from an API. I already installed "next-redux-wrapper" but I don't know how to implement it around the so that all pages get access to the "store" inside "getInitialProps". The Docs of that package has an example but rather a confusing one.

Here's how my store.ts looks like ...

I am trying to implement Redux in a Next.js app and have problems getting the dispatch function to work in getInitialProps. The store is returned as undefined for some reason that I cannot figure out. I am using next-redux-wrapper. I have followed the documentation on next-redux-wrapper GitHub page but somewhere on the way it goes wrong. I know the code is working - I used axios to directly fetch the artPieces and then it worked just fine but I want to use Redux instead. I am changing an react/express.js app to a Next.js app where I will use the API for the basic server operations needed. This is just a small blog app.

Here is my store.js:

Next.js v12.0

next-redux-wrapper.

Whenever I navigate away from the page using the appropriate next/link element and then back again (using another link el) the state is reset to the initial value and so another fetch is executed. What is strange about this is that I have another 'transaction' slice setup in an identical manner except it holds an array of transaction objects and that one is working just fine (navigate away and back and the data is not re-fetched as it persisted in store) code is below any suggestions would be greatly appreciated.

store.js

Tried to make counter with next-redux-wrapper, redux, Next.js.

I've watched that when I clicked few counter button, then move to other page and came back to counter page, getServerSideProps initializes the counter into 3 again. I understand this library as it helps merge the result of dispatch during SSR to client redux store, but does not sync client store state to server redux store.

Did I understand it correctly?

Here is my code of counter app

index.tsx