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.