Keeping components reusable (displaying in Storybook etc.)

[msojda]

Hey,

I came back to using redux after ~4 years of not having too much to deal with frontend side state management.
I've successfully adopted Redux using hooks in the latest React app I've been building however I struggle with having components reusable and available to display in Storybook without involving the whole redux machinery (just giving the components sample data they use as props in separate stories).

When I have been using redux last time there was a concept of presentational (dumb) and container components (aware of the global state) which I think solved the issue of having components without state management, just as they are.
Using hooks this approach is nearly impossible to achieve (with my current knowledge) cause the components are tightly coupled to redux stuff.

What's the current, modern and scalable approach to have components and redux stuff separated, or at least able to live in a single project with Storybook?

Thanks!

[markerikson]

This is really a shift in how the React ecosystem writes components today. It's not exclusive to Redux - any component that uses hooks for its own data fetching or relies on useContext faces the same issues.

See my post Thoughts on React Hooks, Redux, and Separation of Concerns and talk ReactBoston 2019: Hooks, HOCs, and Tradeoffs for some thoughts on this topic.

In addition, the community has really shifted towards writing tests and examples that use components as they are used in the app. A lot of this is driven by the philosophy of React Testing Library.

[dominiczaq]

I'll add my two cents here - we have faced some bugs when we were separating connected and not connected components, and only testing the not connected ones.
It's also really easy to setup mocked store and populate it via actions or even better, in our case, mocked api responses. It's also easer to test when you do not use shallow component rendering and you want to test some component, which renders redux aware components as a child.
I really recommend that approach.