Xavier Balloy A software engineer sharing thoughts on code quality, conferences, and continuous learning. Zola 2021-09-28T00:00:00+00:00 https://xballoy.github.io/tags/redux-saga/feed.xml Xavier Balloy How to use Redux-Saga effects within a callback 2021-09-28T00:00:00+00:00 2021-09-28T00:00:00+00:00 Xavier Balloy https://xballoy.github.io/blog/redux-saga-with-callback/ <p>Because you can only add a <code>yield</code> expression in a generator body it can be tricky to use a callback-based library in your saga (a generator function).</p> <p>Because you can only add a <code>yield</code> expression in a generator body it can be tricky to use a callback-based library in your saga (a generator function).</p> <span id="continue-reading"></span> <p>Let's take this basic example where we want to dispatch an <code>ERROR</code> or a <code>SUCCESS</code> depending on the result of <code>callbackBasedFn</code> to continue our workflow.</p> <p>You cannot write the following code because a <code>yield</code> expression is only allowed in a generator body.</p> <pre class="giallo" style="color-scheme: light dark; color: light-dark(#24292E, #E1E4E8); background-color: light-dark(#FFFFFF, #24292E);"><code data-lang="javascript"><span class="giallo-l"><span style="color: light-dark(#D73A49, #F97583);">import</span><span> {</span><span> put</span><span> }</span><span style="color: light-dark(#D73A49, #F97583);"> from</span><span style="color: light-dark(#032F62, #9ECBFF);"> &#39;</span><span style="color: light-dark(#032F62, #9ECBFF);">redux-saga/effects</span><span style="color: light-dark(#032F62, #9ECBFF);">&#39;</span><span>;</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span style="color: light-dark(#D73A49, #F97583);">function</span><span style="color: light-dark(#D73A49, #F97583);">*</span><span style="color: light-dark(#6F42C1, #B392F0);"> mySaga</span><span>(</span><span style="color: light-dark(#E36209, #FFAB70);">input</span><span>)</span><span> {</span></span> <span class="giallo-l"><span style="color: light-dark(#6F42C1, #B392F0);"> callbackBasedFn</span><span>(</span><span>input</span><span>,</span><span> (</span><span style="color: light-dark(#E36209, #FFAB70);">err</span><span>,</span><span style="color: light-dark(#E36209, #FFAB70);"> data</span><span>)</span><span style="color: light-dark(#D73A49, #F97583);"> =&gt;</span><span> {</span></span> <span class="giallo-l"><span style="color: light-dark(#D73A49, #F97583);"> if</span><span> (</span><span>err</span><span>)</span><span> {</span></span> <span class="giallo-l"><span style="color: light-dark(#6A737D, #6A737D);"> //</span><span style="color: light-dark(#6A737D, #6A737D);"> Not valid: A &#39;yield&#39; expression is only allowed in a generator body.</span></span> <span class="giallo-l"><span style="color: light-dark(#D73A49, #F97583);"> yield</span><span style="color: light-dark(#6F42C1, #B392F0);"> put</span><span>(</span><span>{</span><span> type</span><span>:</span><span style="color: light-dark(#032F62, #9ECBFF);"> &#39;</span><span style="color: light-dark(#032F62, #9ECBFF);">ERROR</span><span style="color: light-dark(#032F62, #9ECBFF);">&#39;</span><span>,</span><span> err</span><span> }</span><span>)</span><span>;</span></span> <span class="giallo-l"><span> }</span><span style="color: light-dark(#D73A49, #F97583);"> else</span><span> {</span></span> <span class="giallo-l"><span style="color: light-dark(#6A737D, #6A737D);"> //</span><span style="color: light-dark(#6A737D, #6A737D);"> Not valid: A &#39;yield&#39; expression is only allowed in a generator body.</span></span> <span class="giallo-l"><span style="color: light-dark(#D73A49, #F97583);"> yield</span><span style="color: light-dark(#6F42C1, #B392F0);"> put</span><span>(</span><span>{</span><span> type</span><span>:</span><span style="color: light-dark(#032F62, #9ECBFF);"> &#39;</span><span style="color: light-dark(#032F62, #9ECBFF);">SUCCESS</span><span style="color: light-dark(#032F62, #9ECBFF);">&#39;</span><span>,</span><span> data</span><span> }</span><span>)</span><span>;</span></span> <span class="giallo-l"><span> }</span></span> <span class="giallo-l"><span> }</span><span>)</span><span>;</span></span> <span class="giallo-l"><span>}</span></span></code></pre> <p>A solution is to use a <code>channel</code> which acts as a watcher.</p> <pre class="giallo" style="color-scheme: light dark; color: light-dark(#24292E, #E1E4E8); background-color: light-dark(#FFFFFF, #24292E);"><code data-lang="javascript"><span class="giallo-l"><span style="color: light-dark(#D73A49, #F97583);">import</span><span> {</span><span> put</span><span>,</span><span> take</span><span> }</span><span style="color: light-dark(#D73A49, #F97583);"> from</span><span style="color: light-dark(#032F62, #9ECBFF);"> &#39;</span><span style="color: light-dark(#032F62, #9ECBFF);">redux-saga/effects</span><span style="color: light-dark(#032F62, #9ECBFF);">&#39;</span><span>;</span></span> <span class="giallo-l"><span style="color: light-dark(#D73A49, #F97583);">import</span><span> {</span><span> channel</span><span> }</span><span style="color: light-dark(#D73A49, #F97583);"> from</span><span style="color: light-dark(#032F62, #9ECBFF);"> &#39;</span><span style="color: light-dark(#032F62, #9ECBFF);">redux-saga</span><span style="color: light-dark(#032F62, #9ECBFF);">&#39;</span><span>;</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span style="color: light-dark(#D73A49, #F97583);">function</span><span style="color: light-dark(#D73A49, #F97583);">*</span><span style="color: light-dark(#6F42C1, #B392F0);"> mySaga</span><span>(</span><span style="color: light-dark(#E36209, #FFAB70);">input</span><span>)</span><span> {</span></span> <span class="giallo-l"><span style="color: light-dark(#D73A49, #F97583);"> const</span><span style="color: light-dark(#005CC5, #79B8FF);"> callbackChannel</span><span style="color: light-dark(#D73A49, #F97583);"> =</span><span style="color: light-dark(#6F42C1, #B392F0);"> channel</span><span>(</span><span>)</span><span>;</span></span> <span class="giallo-l"><span style="color: light-dark(#6F42C1, #B392F0);"> callbackBasedFn</span><span>(</span><span>input</span><span>,</span><span> (</span><span style="color: light-dark(#E36209, #FFAB70);">err</span><span>,</span><span style="color: light-dark(#E36209, #FFAB70);"> data</span><span>)</span><span style="color: light-dark(#D73A49, #F97583);"> =&gt;</span><span> {</span></span> <span class="giallo-l"><span style="color: light-dark(#D73A49, #F97583);"> if</span><span> (</span><span>err</span><span>)</span><span> {</span></span> <span class="giallo-l"><span> callbackChannel</span><span>.</span><span style="color: light-dark(#6F42C1, #B392F0);">put</span><span>(</span><span>{</span><span> type</span><span>:</span><span style="color: light-dark(#032F62, #9ECBFF);"> &#39;</span><span style="color: light-dark(#032F62, #9ECBFF);">ERROR</span><span style="color: light-dark(#032F62, #9ECBFF);">&#39;</span><span>,</span><span> err</span><span> }</span><span>)</span><span>;</span></span> <span class="giallo-l"><span> }</span><span style="color: light-dark(#D73A49, #F97583);"> else</span><span> {</span></span> <span class="giallo-l"><span> callbackChannel</span><span>.</span><span style="color: light-dark(#6F42C1, #B392F0);">put</span><span>(</span><span>{</span><span> type</span><span>:</span><span style="color: light-dark(#032F62, #9ECBFF);"> &#39;</span><span style="color: light-dark(#032F62, #9ECBFF);">SUCCESS</span><span style="color: light-dark(#032F62, #9ECBFF);">&#39;</span><span>,</span><span> data</span><span> }</span><span>)</span><span>;</span></span> <span class="giallo-l"><span> }</span></span> <span class="giallo-l"><span> }</span><span>)</span><span>;</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span style="color: light-dark(#D73A49, #F97583);"> const</span><span style="color: light-dark(#005CC5, #79B8FF);"> action</span><span style="color: light-dark(#D73A49, #F97583);"> =</span><span style="color: light-dark(#D73A49, #F97583);"> yield</span><span style="color: light-dark(#6F42C1, #B392F0);"> take</span><span>(</span><span>callbackChannel</span><span>)</span><span>;</span></span> <span class="giallo-l"><span style="color: light-dark(#D73A49, #F97583);"> yield</span><span style="color: light-dark(#6F42C1, #B392F0);"> put</span><span>(</span><span>action</span><span>)</span><span>;</span></span> <span class="giallo-l"><span>}</span></span></code></pre>