<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom" xmlns:dw="https://www.dreamwidth.org">
  <id>tag:dreamwidth.org,2014-10-10:2331049</id>
  <title>spinda's dreamwidth</title>
  <subtitle>spinda</subtitle>
  <author>
    <name>spinda</name>
  </author>
  <link rel="alternate" type="text/html" href="https://spindas.dreamwidth.org/"/>
  <link rel="self" type="text/xml" href="https://spindas.dreamwidth.org/data/atom"/>
  <updated>2022-12-29T02:19:24Z</updated>
  <dw:journal username="spindas" type="personal"/>
  <entry>
    <id>tag:dreamwidth.org,2014-10-10:2331049:4207</id>
    <link rel="alternate" type="text/html" href="https://spindas.dreamwidth.org/4207.html"/>
    <link rel="self" type="text/xml" href="https://spindas.dreamwidth.org/data/atom/?itemid=4207"/>
    <title>Who needs a backend? ChatGPT as the universal Redux reducer</title>
    <published>2022-12-27T02:09:15Z</published>
    <updated>2022-12-29T02:19:24Z</updated>
    <category term="web"/>
    <category term="react"/>
    <category term="javascript"/>
    <category term="artificial intelligence"/>
    <category term="machine learning"/>
    <category term="program synthesis"/>
    <category term="redux"/>
    <dw:music>la pumpkin - BLOODY MEMOIR vol. II</dw:music>
    <dw:mood>artistic</dw:mood>
    <dw:security>public</dw:security>
    <dw:reply-count>0</dw:reply-count>
    <content type="html">&lt;p&gt;A React/Redux app is a &lt;a href="https://redux.js.org/tutorials/essentials/part-1-overview-concepts#redux-application-data-flow"&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="https://chat.openai.com"&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="https://github.com/spinda/react-redux-chatgpt/tree/main/react-redux-chatgpt"&gt;&lt;code style="white-space:pre-wrap"&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="560" height="315" src="https://www.youtube.com/embed/u9rE7sfCmj8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen"&gt;
&lt;/iframe&gt;
&lt;p&gt;And here’s ChatGPT powering the &lt;a href="https://github.com/reduxjs/redux/tree/master/examples/todomvc"&gt;Redux TodoMVC example&lt;/a&gt;, unmodified except to delete the reducers and replace them with ChatGPT:&lt;/p&gt;
&lt;iframe width="560" height="315" src="https://www.youtube.com/embed/GgR1QiPPie4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen"&gt;
&lt;/iframe&gt;
&lt;p&gt;Check out the &lt;a href="https://github.com/spinda/react-redux-chatgpt"&gt;source code&lt;/a&gt; on GitHub! Or keep reading for an in-depth explainer.&lt;/p&gt;
&lt;span class="cut-wrapper"&gt;&lt;span style="display: none;" id="span-cuttag___1" class="cuttag"&gt;&lt;/span&gt;&lt;b class="cut-open"&gt;(&amp;nbsp;&lt;/b&gt;&lt;b class="cut-text"&gt;&lt;a href="https://spindas.dreamwidth.org/4207.html#cutid1"&gt;Read more...&lt;/a&gt;&lt;/b&gt;&lt;b class="cut-close"&gt;&amp;nbsp;)&lt;/b&gt;&lt;/span&gt;&lt;div style="display: none;" id="div-cuttag___1" aria-live="assertive"&gt;&lt;/div&gt;&lt;br /&gt;&lt;br /&gt;&lt;img src="https://www.dreamwidth.org/tools/commentcount?user=spindas&amp;ditemid=4207" width="30" height="12" alt="comment count unavailable" style="vertical-align: middle;"/&gt; comments</content>
  </entry>
</feed>
