{"id":991,"date":"2018-02-24T00:02:22","date_gmt":"2018-02-24T00:02:22","guid":{"rendered":"https:\/\/greladesign.co\/blog\/?p=991"},"modified":"2018-02-24T00:02:22","modified_gmt":"2018-02-24T00:02:22","slug":"sample-spa-react-redux-with-axios","status":"publish","type":"post","link":"https:\/\/greladesign.co\/blog\/2018\/02\/24\/sample-spa-react-redux-with-axios\/","title":{"rendered":"Sample SPA &#8211; React + Redux with Axios"},"content":{"rendered":"<p>I&#8217;ve put together a Codepen showing the sample usage of Redux (State Management) with network requests (via Axios HTTP Client) in the React framework.<br \/>\n<!--more--><\/p>\n<p>For data gateway I&#8217;ve chose to use the <a href=\"https:\/\/reqres.in\" rel=\"noopener\" target=\"_blank\">REQ\u2009|\u2009RES &#8211; REST API tester<\/a>.<\/p>\n<p class='codepen'  data-height='265' data-theme-id='0' data-slug-hash='vdzBQP' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen <a href='https:\/\/codepen.io\/LukaszGrela\/pen\/vdzBQP\/'>React + Redux + Axios<\/a> by Lukasz Grela (<a href='https:\/\/codepen.io\/LukaszGrela'>@LukaszGrela<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.0<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n<p>This setup is using the promise middleware, in the <a href=\"https:\/\/github.com\/LukaszGrela\/react-redux-crud-tutorial\" rel=\"noopener\" target=\"_blank\">real project<\/a> I&#8217;m using the <code>redux-promise<\/code> dependency, but I wasnt able to find it for this pen so I&#8217;ve copied it from <a href=\"https:\/\/thinkster.io\/tutorials\/react-redux-ajax-middleware\/creating-promise-middleware\" rel=\"noopener\" target=\"_blank\">tutorial on Thinkster<\/a>:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n\r\nfunction isPromise(v) {\r\n  return v &amp;&amp; typeof v.then === 'function';\r\n}\r\n\r\nconst promiseMiddleware = store =&gt; next =&gt; action =&gt; {\r\n  if (isPromise(action.payload)) {\r\n    action.payload.then(\r\n      res =&gt; {\r\n        action.payload = res;\r\n        store.dispatch(action);\r\n      },\r\n      error =&gt; {\r\n        action.error = true;\r\n        action.payload = error.response.body;\r\n        store.dispatch(action);\r\n      }\r\n    );\r\n\r\n    return;\r\n  }\r\n\r\n  next(action);\r\n};\r\n\r\n<\/pre>\n<p>This Pen also differs to <a href=\"https:\/\/github.com\/LukaszGrela\/react-redux-crud-tutorial\" rel=\"noopener\" target=\"_blank\">real project<\/a> in one more place, the <code>store.dispatch<\/code> in the pen always returns the action object, but in the project compiled with webpack (babel) dispatch returns action object or Promise if the action object&#8217;s payload is a Promise.<\/p>\n<p>In the project I could do the following chainging<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nstore.dispatch(actionListUsers()).then(result =&gt; {\r\n    console.log(&quot;response&quot;,result);\r\n    store.dispatch(actionListUsersSuccess(result.payload.data.data));\r\n});\r\n<\/pre>\n<p>but in the pen I had to access <code>payload <\/code>directly<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n  store.dispatch(\r\n    actionListUsers().payload.then(result =&gt; {\r\n      console.log(&quot;response&quot;, result);\r\n      store.dispatch(actionListUsersSuccess(result.data.data));\r\n    })\r\n  )\r\n\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;ve put together a Codepen showing the sample usage of Redux (State Management) with network requests (via Axios HTTP Client) in the React framework.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":""},"categories":[141,325],"tags":[339,340,322,323],"_links":{"self":[{"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/posts\/991"}],"collection":[{"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/comments?post=991"}],"version-history":[{"count":6,"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/posts\/991\/revisions"}],"predecessor-version":[{"id":997,"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/posts\/991\/revisions\/997"}],"wp:attachment":[{"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/media?parent=991"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/categories?post=991"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/tags?post=991"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}