Creating and Using a Simple Event Channel

Demonstrate creating an event channel that listens to window resize events and triggers a Redux-Saga to handle the event.
import { eventChannel } from 'redux-saga';
import { takeEvery, call, put } from 'redux-saga/effects';
First, import the necessary functions from 'redux-saga'.
function createResizeChannel() {
  return eventChannel(emitter => {
    const resizeHandler = () => emitter(window.innerWidth);
    window.addEventListener('resize', resizeHandler);
    // The subscriber must return an unsubscribe function
    return () => {
      window.removeEventListener('resize', resizeHandler);
Define a function to create an event channel that listens to window resize events and emits the window's inner width.
function* handleResize(width) {
  // Handle the resize event here. Maybe update state with the new width.
  yield put({ type: 'WINDOW_RESIZE', width });
Define a saga to handle the resize events. It receives the window width and dispatches an action to update the state.
function* watchResize() {
  const channel = yield call(createResizeChannel);
  yield takeEvery(channel, handleResize);
Define a watcher saga that listens to all events from the created resize channel and calls 'handleResize' saga for each event.
export default watchResize;
Export the watcher saga by default.