redux-saga-selector-channel

Create a redux-saga channel which updates with changes to a selector function.

Example Usage

import { buffers } from 'redux-saga';
import { takeEvery } from 'redux-saga/effects';
import selectorChannel from 'redux-saga-selector-channel';

// ...

function* selectorSaga(selectorOutput) {
  // Use `selectorOutput` here, yield effects, do whatever you do in a saga!
}

// ...

function* mainSaga() {
  const chan = yield selectorChannel(selector, buffers.expanding(10));
  yield takeEvery(chan, selectorSaga);
}

// ...

API

selectorChannel (default export)

This package exports a single function which takes one or two arguments. The first argument is a selector function which will be passed the state of the redux store. The second argument is an optional buffer.

This function returns a call effect which must be yielded to the redux-saga runtime. The result will be a channel you can use in the same way as any other redux-saga channel (take, takeEvery, takeLatest, etc). The contents of the channel will consist of each new output from the selector function (determined with ===).

WARNING

Do not yield any effects from any saga which is handling output from your selector which will cause the selector to create a new output! This will cause an infinite loop. For a concrete example, consider the following:

// DO NOT DO THIS!

function* selectorSaga(counter) {
  yield put(incrementCounter());
}

function* mainSaga() {
  const chan = yield selectorChannel(state => state.counter);
  yield takeEvery(chan, selectorSaga);
}

The selector function in this case returns the current counter value and the saga running in response to the selector output changing itself puts an event which changes the counter value. This causes an infinite loop! It is okay to put from a selector response saga, but you have to be careful not to cause infinite loops.

A Note on Build Systems

This package uses non-transpiled generator functions in order to give you the flexibility to either use native generator functions or transpile them yourself. If you need to support browsers that do not natively support generator functions, make sure you configure your build to transpile this package! In a setup using webpack the easiest way to do this is to use Rule.include and explitily include your source directories as well as the resolved path to this module (rather than using Rule.exclude to exclude node_modules and then somehow excluding this package from Rule.exclude).

This package also doesn't have a main field, only a module field. As long as you are using a modern build system this should not be a problem.

Prior Art

This package is simply a TypeScript packaging of redux-saga/redux-saga#1694. There may be future changes to support passing additional arguments to the selector function (as is already supported in the select effect). Pull requests welcome!

License

MIT