<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: tqm1990</title>
    <description>The latest articles on Forem by tqm1990 (@tqm1990).</description>
    <link>https://forem.com/tqm1990</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161853%2F8d1dd368-7967-47eb-a89c-83573f0f4189.jpg</url>
      <title>Forem: tqm1990</title>
      <link>https://forem.com/tqm1990</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/tqm1990"/>
    <language>en</language>
    <item>
      <title>I implemented a sample Django app written in Hylang.</title>
      <dc:creator>tqm1990</dc:creator>
      <pubDate>Sat, 04 Jan 2020 07:35:01 +0000</pubDate>
      <link>https://forem.com/tqm1990/an-app-as-a-sample-implementation-using-django-rest-and-hylang-1h4o</link>
      <guid>https://forem.com/tqm1990/an-app-as-a-sample-implementation-using-django-rest-and-hylang-1h4o</guid>
      <description>&lt;p&gt;I wrote &lt;a href="https://github.com/charlie-browns/django-app-with-hylang"&gt;the app&lt;/a&gt;.&lt;br&gt;
The above is written in Hylang with Django and Django REST framework.&lt;/p&gt;

&lt;h2&gt;
  
  
  TODO
&lt;/h2&gt;

&lt;p&gt;Hylang is one of a Lisp dialect. Of course it can use Lisp macro &lt;br&gt;
but It doesn't actually use any lisp macro powers yet. &lt;/p&gt;

</description>
      <category>hy</category>
      <category>hylang</category>
      <category>django</category>
      <category>lisp</category>
    </item>
    <item>
      <title>redux-saga without redux</title>
      <dc:creator>tqm1990</dc:creator>
      <pubDate>Mon, 29 Apr 2019 12:56:01 +0000</pubDate>
      <link>https://forem.com/tqm1990/redux-saga-without-redux-eda</link>
      <guid>https://forem.com/tqm1990/redux-saga-without-redux-eda</guid>
      <description>&lt;p&gt;This article is based on &lt;a href="https://qiita.com/tqm1990/items/5e6cb017d4f6675636c7"&gt;the blog post&lt;/a&gt; that I wrote in Japanese.&lt;/p&gt;

&lt;p&gt;This is my first tec article written in English.&lt;br&gt;
I know my article is including a lot of grammar errors but It is one of my challenge. &lt;/p&gt;
&lt;h1&gt;
  
  
  Why ?
&lt;/h1&gt;

&lt;p&gt;I wanted a concurrent processing like redux-saga but did not want depending on redux.&lt;br&gt;
then, I tried to use redux-saga without redux.   &lt;/p&gt;
&lt;h1&gt;
  
  
  How to do it
&lt;/h1&gt;

&lt;p&gt;redux-saga has runSaga(options, saga, ...args) as a External API which anyone might not know.&lt;/p&gt;

&lt;p&gt;The api is used to be called out of a context of redux-saga to run a saga.&lt;br&gt;
see below:&lt;br&gt;
&lt;a href="https://redux-saga.js.org/docs/api/"&gt;https://redux-saga.js.org/docs/api/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Let's get started to write small code.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// helper.js&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;sagaOptionSingleton&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;                                                                                              

    &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;channelStd&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;stdChannel&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
    &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;emitter&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;EventEmitter&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

    &lt;span class="nx"&gt;emitter&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;on&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;action&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="nx"&gt;channelStd&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;put&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="na"&gt;channel&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="nx"&gt;channelStd&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;dispatch&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="nx"&gt;output&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="nx"&gt;emitter&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;emit&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;action&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="nx"&gt;output&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="p"&gt;},&lt;/span&gt;
        &lt;span class="na"&gt;getState&lt;/span&gt;&lt;span class="p"&gt;:()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{}&lt;/span&gt;
    &lt;span class="p"&gt;};&lt;/span&gt;
 &lt;span class="p"&gt;})();&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;runSagaWithFixedOpt&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;saga&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;                                                                                                            
  &lt;span class="nx"&gt;runSaga&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;sagaOptionSingleton&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="nx"&gt;saga&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;One of the important thing is that stdChannel has been given to the option.&lt;br&gt;
I think the API doc does not describe that stdChannel is an interface that is buffering some actions put by a saga in a saga context.&lt;br&gt;
It should be implemented by a singleton pattern.&lt;/p&gt;

&lt;p&gt;Therefore, I wrote a self executing function to create the sagaOptionSingleton that is used to set to the option.&lt;br&gt;
Finally, redux-saga did not depend on redux !&lt;/p&gt;

&lt;p&gt;for that reason, "put" as a side effect of redux-saga, does not make any effects to the store of redux. &lt;br&gt;
If we want to write something to the store, &lt;br&gt;
we use store.dispatch() . &lt;/p&gt;

&lt;p&gt;I got a pure redux ! &lt;/p&gt;

&lt;p&gt;but, how to notify events from mapDispatchToProps in react-redux ?&lt;br&gt;
It can not do it for that reason.&lt;br&gt;
instead, I am going to write a wrapper function like below:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// helper.js&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;sendToSaga&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;
    &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="nx"&gt;sendSomethingToSaga&lt;/span&gt;&lt;span class="p"&gt;(){&lt;/span&gt;    
       &lt;span class="k"&gt;yield&lt;/span&gt; &lt;span class="nx"&gt;put&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="nx"&gt;runSagaWithFixedOpt&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;sendSomethingToSaga&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;It is trying to send an event by the way that running a saga out of saga context and doing put action.&lt;br&gt;
then,&lt;br&gt;
I wrote a code for mapDispatchToProps like below:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;mapDispatchToProps&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;dispatch&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;increment&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;sendToSaga&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;INCREMENT&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;&lt;span class="c1"&gt;// Send a event to saga&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;h1&gt;
  
  
  Conclusion
&lt;/h1&gt;

&lt;p&gt;We can use redux-saga without redux.&lt;/p&gt;

</description>
      <category>redux</category>
      <category>reduxsaga</category>
      <category>react</category>
    </item>
  </channel>
</rss>
