<?xml version='1.0' encoding='utf-8' ?>

<rss version='2.0' xmlns:lj='http://www.livejournal.org/rss/lj/1.0/' xmlns:atom10='http://www.w3.org/2005/Atom'>
<channel>
  <title>spinda&apos;s dreamwidth</title>
  <link>https://spindas.dreamwidth.org/</link>
  <description>spinda&apos;s dreamwidth - Dreamwidth Studios</description>
  <lastBuildDate>Tue, 27 Dec 2022 02:09:15 GMT</lastBuildDate>
  <generator>LiveJournal / Dreamwidth Studios</generator>
  <lj:journal>spindas</lj:journal>
  <lj:journaltype>personal</lj:journaltype>
  <image>
    <url>https://v2.dreamwidth.org/10984319/2331049</url>
    <title>spinda&apos;s dreamwidth</title>
    <link>https://spindas.dreamwidth.org/</link>
    <width>100</width>
    <height>100</height>
  </image>

<item>
  <guid isPermaLink='true'>https://spindas.dreamwidth.org/4207.html</guid>
  <pubDate>Tue, 27 Dec 2022 02:09:15 GMT</pubDate>
  <title>Who needs a backend? ChatGPT as the universal Redux reducer</title>
  <link>https://spindas.dreamwidth.org/4207.html</link>
  <description>&lt;p&gt;A React/Redux app is a &lt;a href=&quot;https://redux.js.org/tutorials/essentials/part-1-overview-concepts#redux-application-data-flow&quot;&gt;one-way data flow cycle&lt;/a&gt;. The user interacts with the UI, which produces Redux &lt;strong&gt;actions&lt;/strong&gt;, which get dispatched to &lt;strong&gt;reducer&lt;/strong&gt; functions, which update the app’s &lt;strong&gt;state&lt;/strong&gt; object, which gets passed back to React to re-render the UI.&lt;/p&gt;
&lt;p&gt;A conversation with &lt;a href=&quot;https://chat.openai.com&quot;&gt;ChatGPT&lt;/a&gt; is &lt;em&gt;also&lt;/em&gt; a one-way cycle. A human sends a &lt;strong&gt;prompt&lt;/strong&gt; (action), which gets passed to the &lt;strong&gt;language model&lt;/strong&gt; (reducer), which updates the &lt;strong&gt;conversation&lt;/strong&gt; (state) with its response.&lt;/p&gt;
&lt;p&gt;Can we use the latter to emulate the former? Spoilers: yes, we totally can! ChatGPT will happily act as your universal reducer, so you can prototype your app’s frontend without needing to mock up a backend or business logic right away. And after interacting with the frontend for a bit to teach the AI how the app works, you can even ask it to implement the reducer function for you.&lt;/p&gt;
&lt;p&gt;Here’s a quick demo of a basic counter app with my &lt;a href=&quot;https://github.com/spinda/react-redux-chatgpt/tree/main/react-redux-chatgpt&quot;&gt;&lt;code style=&quot;white-space:pre-wrap&quot;&gt;react-redux-chatgpt&lt;/code&gt;&lt;/a&gt; plugin doing the reducing (app on the left, behind-the-scenes ChatGPT conversation in the console on the right):&lt;/p&gt;
&lt;iframe width=&quot;560&quot; height=&quot;315&quot; src=&quot;https://www.youtube.com/embed/u9rE7sfCmj8&quot; title=&quot;YouTube video player&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture&quot; allowfullscreen=&quot;allowfullscreen&quot;&gt;
&lt;/iframe&gt;
&lt;p&gt;And here’s ChatGPT powering the &lt;a href=&quot;https://github.com/reduxjs/redux/tree/master/examples/todomvc&quot;&gt;Redux TodoMVC example&lt;/a&gt;, unmodified except to delete the reducers and replace them with ChatGPT:&lt;/p&gt;
&lt;iframe width=&quot;560&quot; height=&quot;315&quot; src=&quot;https://www.youtube.com/embed/GgR1QiPPie4&quot; title=&quot;YouTube video player&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture&quot; allowfullscreen=&quot;allowfullscreen&quot;&gt;
&lt;/iframe&gt;
&lt;p&gt;Check out the &lt;a href=&quot;https://github.com/spinda/react-redux-chatgpt&quot;&gt;source code&lt;/a&gt; on GitHub! Or keep reading for an in-depth explainer.&lt;/p&gt;
&lt;span class=&quot;cut-wrapper&quot;&gt;&lt;span style=&quot;display: none;&quot; id=&quot;span-cuttag___1&quot; class=&quot;cuttag&quot;&gt;&lt;/span&gt;&lt;b class=&quot;cut-open&quot;&gt;(&amp;nbsp;&lt;/b&gt;&lt;b class=&quot;cut-text&quot;&gt;&lt;a href=&quot;https://spindas.dreamwidth.org/4207.html#cutid1&quot;&gt;Read more...&lt;/a&gt;&lt;/b&gt;&lt;b class=&quot;cut-close&quot;&gt;&amp;nbsp;)&lt;/b&gt;&lt;/span&gt;&lt;div style=&quot;display: none;&quot; id=&quot;div-cuttag___1&quot; aria-live=&quot;assertive&quot;&gt;&lt;/div&gt;&lt;br /&gt;&lt;br /&gt;&lt;img src=&quot;https://www.dreamwidth.org/tools/commentcount?user=spindas&amp;ditemid=4207&quot; width=&quot;30&quot; height=&quot;12&quot; alt=&quot;comment count unavailable&quot; style=&quot;vertical-align: middle;&quot;/&gt; comments</description>
  <comments>https://spindas.dreamwidth.org/4207.html</comments>
  <category>redux</category>
  <category>web</category>
  <category>javascript</category>
  <category>react</category>
  <category>program synthesis</category>
  <category>machine learning</category>
  <category>artificial intelligence</category>
  <lj:music>la pumpkin - BLOODY MEMOIR vol. II</lj:music>
  <lj:mood>artistic</lj:mood>
  <lj:security>public</lj:security>
  <lj:reply-count>0</lj:reply-count>
</item>
</channel>
</rss>
