mehmetpekcan / nextjs-13-state-management Goto Github PK

In the redux example, at redux/src/app/layout.jsx, on line 15:

await store.dispatch(fetchUser());

you're performing this data fetching on a global store reference. This can potentially cause data leakage between requests.

To see it in action, first add a console.log before the data fetching:

export default async function RootLayout({ children }) {
  console.log(store.getState());
  await store.dispatch(fetchUser());
  const { user } = store.getState().user;

Now, when you visit a page for the first time (first user), the output is empty as expected:

{
  basket: { basket: [] },
  products: { product: {}, products: [] },
  user: { user: {} }
}

But, if you open another tab (incognito if you will, to keep it even more isolated), the previously fetched data is available, since the store instance is global:

{
  basket: { basket: [] },
  products: {
    product: {},
    products: [
      [Object], [Object], [Object],
      [Object], [Object], [Object],
      [Object], [Object], [Object],
      [Object], [Object], [Object],
      [Object], [Object], [Object],
      [Object], [Object], [Object],
      [Object], [Object]
    ]
  },
  user: { user: { id: 1, name: 'John Doe' } }
}

When done sequentially like this the data will get overwritten so it may seem like it's not a problem, but in a real setup you'll have parallel users which causes race conditions.

when i fetch data from api in app page and try to set in redux it not working i tried and search everywhere bu i dont get solution