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
}
}
}
Conclusion
We can use redux-saga without redux.
Top comments (0)