redux-saga without redux

#redux #reduxsaga #react

This article is based on the blog post that I wrote in Japanese.

This is my first tec article written in English.
I know my article is including a lot of grammar errors but It is one of my challenge.

Why ?

I wanted a concurrent processing like redux-saga but did not want depending on redux.
then, I tried to use redux-saga without redux.

How to do it

redux-saga has runSaga(options, saga, ...args) as a External API which anyone might not know.

The api is used to be called out of a context of redux-saga to run a saga.
see below:
https://redux-saga.js.org/docs/api/

Let's get started to write small code.

// helper.js
const sagaOptionSingleton = (() => {                                                                                              

    let channelStd = stdChannel();
    let emitter = new EventEmitter();

    emitter.on("action",channelStd.put);

    return {
        channel:channelStd,
        dispatch:output => {
            emitter.emit("action",output);
        },
        getState:() => {}
    };
 })();

export function runSagaWithFixedOpt(saga){                                                                                                            
  runSaga(sagaOptionSingleton,saga);
}

One of the important thing is that stdChannel has been given to the option.
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.
It should be implemented by a singleton pattern.

Therefore, I wrote a self executing function to create the sagaOptionSingleton that is used to set to the option.
Finally, redux-saga did not depend on redux !

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

I got a pure redux !

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

// helper.js
export function sendToSaga(data){
    function* sendSomethingToSaga(){    
       yield put(data);
    }
    runSagaWithFixedOpt(sendSomethingToSaga);
}

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

const mapDispatchToProps = dispatch => {
  return {
    increment: () => {
      sendToSaga({ type: 'INCREMENT' });// Send a event to saga
    }
  }
}