Storybook: are there any good examples out there how to reset state when switching stories?

[binarykitchen]

Hello folks,

I wonder if there are any good react-redux/RTK examples out there using Storybook?
Storybook is great for testing UI components in isolation.

My problem is, when I switch between stories, it still uses the previous state. Similar to unit tests, I'd like to reset it back to initial state. Yet, it still uses the previous state.

For example, one single boolean: enable or disable audio, see screenshot where it's wrong:

When switching from without audio (= false) to with audio, it should reload the initial state where audio is enabled, but it doesn't.

I've set up a storybook decorator to fix this, but it doesn't work properly, see:
https://github.com/binarykitchen/videomail-recorder/blob/main/.storybook/preview.tsx#L45

So yes, that's why I am asking around for good examples how to reset back to the initial state whenever you switch a story within Storybook.

Thanks for any pointers or advice :)

[binarykitchen]

Perhaps I need to pass over the preloadedState to the configureStore fn in another function wrapper similar to this example?
https://github.com/reduxjs/redux-toolkit/blob/master/examples/query/react/basic/src/store.ts#L9

I'm unsure. Feels like overcomplicated and too much boilerplate.

Because when configuring a new store based on reducers AND when there is no preloadedState, it should always point back to the initial state all reducers come from, don't you think so?

[EskiMojo14]

just like with tests, your stories should get a fresh store, not a shared singleton.

here's what i do:

// store.ts
const rootReducer = combineReducers({ ... })
export type PreloadedState = Parameters<typeof rootReducer>[0]

export function makeStore(preloadedState?: PreloadedState) {
  return configureStore({
     reducer: rootReducer,
     ...
   })
}
export type AppStore = ReturnType<typeof makeStore>
export type RootState = ReturnType<AppStore["getState"]>
export type AppDispatch = AppStore["dispatch"]

// .storybook/preview.ts
import type { Decorator, Preview } from "@storybook/react-vite";
import { Provider } from "react-redux"
import { type PreloadedState, type AppStore, makeStore } from "../store"

declare module "@storybook/react" {
  export interface Parameters {
    preloadedState?: PreloadedState;
    store?: AppStore
  }
}

export const reduxDecorator: Decorator = (Story, { parameters }) => {
  parameters.store ??= makeStore(parameters.preloadedState)
  return (
    <Provider store={parameters.store}>
      <Story />
    </Provider>
  );
}

then if you want to preload some state/provide a store, you can:

const ExampleStory: Story = {
  parameters: {
    preloadedState: { counter: { value: 2 } }
  }
}

// or
const store = makeStore();
store.dispatch(increment())

const ExampleStory: Story = {
  parameters: { store }
}

[EskiMojo14]

okay, so findings:

• you're using exactOptionalPropertyTypes, so you'll need to replace preloadedState with ...(preloadedState && { preloadedState }).
• you're missing export const store = makeStore() - i had omitted it for brevity as it's not relevant to stories, but you still need it for the rest of your app

If you don't mind, would you share this how you do it, in a public repo for the sake of redux-toolkit?

here's an example of a repo where i've done it (albeit slightly differently, but the principle is the same)

https://github.com/EskiMojo14/ransom-notes/blob/main/src/store.ts
https://github.com/EskiMojo14/ransom-notes/blob/main/src/storybook/decorators.tsx#L11
https://github.com/EskiMojo14/ransom-notes/blob/main/.storybook/preview.tsx#L54

// Critic: https://redux.js.org/api/combinereducers says, this should be rarely used, while Storybook testing is quite popular.

configureStore calling combineReducers for you is convenient, but there's no way to extract the correct PreloadedState type when doing it. the store, once created, has no concept of "preloaded state", it's entirely dependent on the reducer and only needed when creating the store.

frankly i rarely use combineReducers either, combineSlices is far more convenient.

[binarykitchen]

Thanks for sharing. Right. I see, we're getting there ...
I've fixed a couple of bugs, checked your ransom-notes repo, added improvements and the stories do work now.

But I'm still stuck with some TypeScript mismatches during deepmerges. At this line:
https://github.com/binarykitchen/videomail-recorder/blob/main/src/features/options/reducers.ts#L15

Type 'PartialObjectDeep<VideomailRecorderOptions, { recurseIntoArrays: false; allowUndefinedInNonTupleArrays: false; }>' is not assignable to type 'VideomailRecorderOptions' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties.
  Property 'apiUrl' is optional in type 'PartialObjectDeep<VideomailRecorderOptions, { recurseIntoArrays: false; allowUndefinedInNonTupleArrays: false; }>' but required in type 'VideomailRecorderOptions'.

No way, I will flag property apiUrl as undefined. I'm just trying to deep merge some partial options to the original options in a new JSON.

(Once all is sorted, I'm happy to return the favour, to polish your documentation with a PR of mine ...)

[markerikson]

Is that even an RTK types issue? What happens if you do that deepmerge with the same data type outside of RTK?

[binarykitchen]

Fair question. I've tested this again in isolation without RTK, and it still happens.

So, I've raised this issue in the other library here
fastify/deepmerge#82

Sorry about the false alert.

I'm just still amazed that deepmerging is still a pain in 2026 😓

[binarykitchen]

I've swapped the deep merge library. It's better now, but I'm experiencing new TypeScript issues around the Preloaded State which I just raised in a separate discussion:

#5215