How do I write a storybook story for a component that has redux-connected component as grandchild?

Question

We are building a Storybook UI library from our existing code base. The code wasn't written with component driven development in mind. There are many instances where a component renders descendants that are connected to the Redux store.

E.g., Parent (connected) -> Child (unconnected) -> Grandchild (connected)

Now if I'm building a story for Parent, I understand how to pass hard-coded data as a prop to an immediate child component in order to avoid Redux all together. However, I can't figure out how to do this when the connected component is more deeply nested.

Ideally I don't want to have to use Redux at all for stories, but even if I do initialize a Redux store and wrap the parent component in a Provider as described here, would this even work to connect the grandchild component?

Any ideas would be helpful.

Answer 1

If you want to solve the problem within your story file (and just fetch your store), use decorator like this:

import React from "react";
import { Provider } from 'react-redux'
import Parent from "./Parent";

import { store } from "../../../redux/store";

export default = {
  title: "pages/Parent",
  component: Parent,
  decorators : [
    (Story) => (<Provider store={store}><Story/></Provider>)
  ]
};

---

Sidenote, if this gives you the error useNavigate() may be used only in the context of a <Router> component., then you may need <MemoryRouter><Provider store={store}><Story/></Provider></MemoryRouter> (import {MemoryRouter} from 'react-router-dom')