Channels in redux-saga

Reading Time: 3 minutes

What are the channels? Are they useful to us in day to day programming? We’ll be going through this blog that channels are played really a major role in redux-saga.

Channels:
Channels are of 3 types which are used to perform 3 different things, here I will brief you about those channels here but will explain in detail a bit later.

  • Action Channels: Action channel is a buffer, it stockpiles actions which sagas can consume one by one.
  • Generic Channels: Generally, we use Generic channels to communicate between two sagas. This can be done through the Actions but the idea of a channel is that communication is limited interest in sagas without other sagas being privy to that information.
  •  Event Channels: Event Channel is completely different used to wrap outside event sources. we can consider web socket as a good example of the Event channel.

Now, we will discuss each and every channel mentioned above one by one in detail below:

 Action Channels:
The Action channels record all the events with the specified type when you create an action channel you also specify the types of events or actions that you want your action channel to listen for. Now, when you call take and pass channel as a parameter you will get the old record and that record is removed. It basically used to handle actions that otherwise would have lost.
Now we will create a saga name updateSaga and then will create a channel in it by yielding to the action channel creator. Afterward, we will create a loop that yields from the channel. finally, we will log which specify that we got the input from the channel with some 1-sec delay.

eg:

let updateSaga = function*() {
    let chan = yield actionChannel(“UPDATE”);
    while(true) {
    yield effects.take(chan);
    console.info(‘update logged’);
    yield delay(1000);
}
}

After, this we will run our saga using the command:
run(updateSaga);
And you will notice here, nothing would happen after running saga because we need to dispatch our action.

dispatch({type: ‘UPDATE’});

After dispatching an action you will see the log is displaying there, but what if we dispatch the actions multiple times in one go? just try yourself and you will notice that after the rapid succession of dispatches, update message slowly catches up to the exact number of updates.

Generic Channels:
Generic channels create a special link between two different sagas. Unlike Action channels you don’t need any action types here. It implies any channel that is sent through this channel is of a particular type.

eg: In this example, we create the saga named saga and then we create a channel, after creating in we define the child process in which we pass the channel as a parameter, then we loop in and log the payload after yielding the channel using take effects with some delay of 2000ms.

function* saga() {
      let chan = yield channel();
      function* handleChannelRequest(chan) {
    while(true) {
    let payload = yield effects.take(chan);
   console.info(‘Got Payload’ + payload);
   yield delay(2000);
}

// fork the handler number of times by passing a channel as a parameter.
yield effects.fork(hanldeChannelRequest, chan);
yield effects.fork(hanldeChannelRequest, chan);

//finally here we put an effect to the channel, so here we don’t need to dispatch any action here rather use put effect for the same.
yield effects.put(chan,{payload: 50});
}
}

run(saga);

Finally, run the saga and you will notice that you will get the payload message only once that means handler handles it correctly.

Event Channels:
Event channels are basically the wrapper of an outside source of events. These events are generally WebSockets and other outsource events can be Ajax calls been consistently displaced by web sockets. The purpose of the event channel is to take the events coming from the WebSocket and converted into the Actions, which react well to take effect and yield into it.

eg: These types of channels can be used in the scenarios where an application uses WebSockets to communicate with APIs.

After reading this blog you must have some idea of how we can use these channels and in which scenarios they can come into handy. Also, if you want to learn about the effects of redux-saga you can refer to by another blog. saga-effects

Thanks For Reading…

Written by 

Nitin Arora is a Software Consultant at Knoldus Software LLP. He has done MCA from the Banarsidas Chandiwala Institute of Information technology, Delhi(GGSIPU). He has a graduation degree in BCA from Jamia Hamdard. He has a sound knowledge of various programming languages like C, C++, Java. Also has a deep interest in frontend development like Html, CSS, Angular, Javascript, ionic, react with redux, bootstrap. He is currently working in frontend technologies like React, Html, SCSS, Bootstrap, and Typescript. He is a focused, hardworking, team-oriented member and always exploring new Technologies, His hobbies are to play cricket, volleyball, and do coding.