atlassian / react-sweet-state

Shared state management solution for React

Home Page:https://atlassian.github.io/react-sweet-state/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How to display components that uses store created using RSS (react-sweet-state) in Storybook ?

asvny opened this issue · comments

The more idiomatic way is presentational/container components but wondering if there is any other way.

Take for example Todo list .. it can be in different states and I would like to have stories for each of them like

yet to be done
partially completed
all completed
Editing stating
In the case of redux, I can wrap it with a provider and give an appropriate initial state .. so automatically I can force it to be in my desired state.

Coming to RSS .. I like the simplicity but how do I give different initial states for each story?

Well, if in your story you create a Container with an onInit function that sets the state of the store you can play around with all states (kinda like Redux Provider would do).

An alternative that we use (and I recommend) is react-magnetic-di. It allows you to replace hooks and components anywhere in the tree and provide the return value that you want.
It does not only work with RSS but with anything, so you don't have to mock things in different ways based on libraries implementations but you just return the desired values for that component/hook on that story.