Please reset state properly when switching between states

[binarykitchen]

Summary

Hello folks,

Wonderful library. React + Redux user here. I do notice, state isn't reset properly when switching between stories.

To reproduce,

1. git clone from https://github.com/binarykitchen/videomail-recorder.git
2. npm install
3. npm run storybook
4. Click between "Audio or Without Audio", yet it still displays the same.

I've already researched. There are some suggestions out there to use Storybook's preview or decorators to reset the state, which I feel not right. Because, it's all about states, and whenever you switch stories, all has to be reset properly. Even for React components.

Hence, raising this discussion here.

Additional information

No response

Create a reproduction

https://github.com/binarykitchen/videomail-recorder.git

[dosubot[bot]]

Hi @binarykitchen! I'm Dosu and I’m helping the storybook team.

Redux state persists across stories because Storybook does not automatically reset or recreate your Redux store when switching stories. This is a common scenario with global state libraries like Redux. The recommended solution is to use a Storybook decorator that wraps each story with a fresh Redux store instance, ensuring state isolation and reset between stories. This approach is documented in the official Storybook docs and is widely used in the community (docs, decorators guide, mocking providers).

Here’s how you can do it:

// .storybook/preview.js or preview.tsx
import React from 'react';
import { Provider } from 'react-redux';
import { configureStore } from '@reduxjs/toolkit';
import rootReducer from '../src/reducers'; // adjust to your root reducer

export const decorators = [
  (Story, context) => {
    // Optionally, use context.parameters to customize initial state per story
    const store = configureStore({ reducer: rootReducer, preloadedState: context.parameters.initialState });
    return (
      <Provider store={store}>
        <Story />
      </Provider>
    );
  },
];

You can now set parameters.initialState in your stories to control the initial Redux state for each one.

Avoid using a single global store or only preview.js without a decorator, as this will not isolate state between stories. Workarounds like forcing a page reload or unmounting the root node exist, but the decorator pattern above is the best practice for Redux in Storybook (discussion, docs).

You can try this pattern and see if it resolves your state reset issue. If you still see state leaking, please share your current decorator or provider setup for further review.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[binarykitchen]

Nice feedback @dosu
Good to learn how Storybook handles states.

At the same time, this solution still doesn't work out.
Because it's a component library, not an application, where all is already wrapped in a provider.
I am already wrapping the components in a provider before exporting these. You cannot wrap them again a second time in another provider for stories :)

I've already posted the steps to reproduce this above.

Lastly, has this ever been raised before - is there a storybook plugin out there to support react-redux?

[dosubot[bot]]

There isn’t an official or community-maintained Storybook plugin for React-Redux state reset, especially for component libraries where components are already wrapped in a provider. This scenario has come up in discussions before, and double-wrapping Redux providers is problematic—React-Redux does not support changing the store on the fly, and nested providers can cause unpredictable state or hot-reloading issues [discussion].

Storybook doesn’t automatically reset Redux state between stories if the store is created outside the story context. The usual decorator pattern (wrapping each story with a fresh store) only works if you control the provider at the story level. When the provider is baked into the component, there’s no built-in way for Storybook to reset or replace the store per story.

Workarounds that have been used in the community include:

• Forcing a remount using the FORCE_REMOUNT event, which can reset local component state but won’t reset Redux state unless the store itself is re-instantiated [example].
• Unmounting the root node with ReactDOM.unmountComponentAtNode(document.getElementById('root')) before rendering a new story, which is a hack and not officially supported [discussion].
• Exposing a manual reset action on your Redux store and triggering it from a custom Storybook control or play function, so you can reset state on demand without reloading the page [discussion].
• Using a changing key prop on the root component to force React to remount it, but this requires manual state management and doesn’t scale well.

If you want true state isolation, the most robust approach is to separate your presentational and container components, so you can storybook the presentational ones with props and only wrap with Redux at the app level. If that’s not feasible, exposing a reset action or using the FORCE_REMOUNT event are your best options, but both require some manual wiring.

Let me know if you want code examples for any of these workarounds.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[binarykitchen]

I've figured it out with a storybook decorator. Thanks.