# Store Lifetime

## Decision table

| Environment | Default store shape | Why |
| --- | --- | --- |
| Client-only SPA | One module-level singleton store | There is one browser session and no cross-request leakage risk. |
| SSR-heavy React app | `makeStore()` plus provider-local state | Each request needs its own store instance, but that instance must stay stable across client renders. |
| Non-React integration code | Direct store access can be acceptable | This is outside the React context boundary and should stay out of UI components. |

## SPA pattern

```ts
import { configureStore } from '@reduxjs/toolkit'
import { postsSlice } from '../features/posts/postsSlice'

export const store = configureStore({
  reducer: {
    posts: postsSlice.reducer,
  },
})
```

Use this for classic browser SPAs.

## SSR-heavy React pattern

```tsx
// file: src/lib/store.ts
import { configureStore } from '@reduxjs/toolkit'
import { postsSlice } from '../features/posts/postsSlice'

export const makeStore = () =>
  configureStore({
    reducer: {
      posts: postsSlice.reducer,
    },
  })

// file: src/app/StoreProvider.tsx
'use client'

import { useState, type ReactNode } from 'react'
import { Provider } from 'react-redux'
import { makeStore } from '../lib/store'

export function StoreProvider({ children }: { children: ReactNode }) {
  const [store] = useState(makeStore)
  return <Provider store={store}>{children}</Provider>
}
```

Create the store per request, then keep it stable inside the provider component.