{"id":7328,"date":"2019-11-03T21:26:21","date_gmt":"2019-11-03T21:26:21","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=7328"},"modified":"2019-11-03T21:26:21","modified_gmt":"2019-11-03T21:26:21","slug":"redux-and-storybook","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/redux-and-storybook\/","title":{"rendered":"Redux and storybook"},"content":{"rendered":"<p>We&#8217;ve implemented our React UI and set-up storybook to test it but we&#8217;re using redux as our store, so how do we use this in storybook?<\/p>\n<p>Storybook allow us to create a decorator which is really just a wrapper around our story, so for example we add a decorator using <em>.addDecorator<\/em> like this<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\nstoriesOf(&quot;SomeComponent&quot;, module)\r\n  .addDecorator(withProvider)\r\n  .add(&quot;default&quot;, () =&gt; \r\n    &lt;SomeComponent \/&gt;\r\n );\r\n<\/pre>\n<p>Within the <em>.addDecorator<\/em> we can add more React code or HTML, maybe to position our test component centrally in the screen or in this case we can use the same code to wrap a Provider. <\/p>\n<p>As you can see from the above code we&#8217;ve got a <em>withProvider<\/em> value which looks like this<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\nconst withProvider = (story) =&gt; &lt;Provider store={store}&gt;{story()}&lt;\/Provider&gt;\r\n<\/pre>\n<p>Hence the code takes a story (the story we&#8217;re testing) and we simply wrap it within a Provider element having previously created the redux store using the standard createStore function, i.e.<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\nconst store = createStore(reducer);\r\n<\/pre>\n<p>Now we can test our UI\/UX code within storybook using the redux store for it&#8217;s state.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;ve implemented our React UI and set-up storybook to test it but we&#8217;re using redux as our store, so how do we use this in storybook? Storybook allow us to create a decorator which is really just a wrapper around our story, so for example we add a decorator using .addDecorator like this storiesOf(&quot;SomeComponent&quot;, module) [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[243,252,251],"tags":[],"class_list":["post-7328","post","type-post","status-publish","format-standard","hentry","category-react","category-redux","category-storybook"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7328","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=7328"}],"version-history":[{"count":2,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7328\/revisions"}],"predecessor-version":[{"id":7599,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7328\/revisions\/7599"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=7328"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=7328"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=7328"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}