epix

Epix

Epics without redux-observable.

Why?

Epics are a very strong pattern to build maintainable applications with RxJS. They were pioneered by redux-observable, which forces you to use Redux. Epix is for all the cases where you manage your state without Redux.

Install

yarn add epix

or

npm install epix

API

import { Subject } from 'rxjs';
import { startEpics, ofType } from 'epix';

const action$ = new Subject();

function logMessageEpic(action$) {
	return action$.pipe(
		ofType('logMessage'),
		tap(({ message }) => console.log(message)),
		map(() => ({ type: 'logMessageDone' })),
	);
}

function doNothingEpic() {
	return empty();
}

const epics = [
	logMessageEpic,
	doNothingEpic,
];

startEpics(epics, action$);

action$.next({
	type: 'logMessage',
	message: 'Hello world',
});

If you have no idea what's going on here, I recommend getting accustomed with redux-observable first.

startEpics(epics, action$, [options])

This is epix's replacement of createEpicMiddleware and combineEpics in a single function.

Arguments

1. epics: Array<Epic>: your epics. The order matters, epics higher up in the array run before other
2. action$: Subject: the action stream, that actions will go trough.
3. [options: Object]: pass what you want here. It will be made available to all epics as their second argument.

TypeScript

Define your epics with Epic as a type.

import { tap, ignoreElements } from 'rxjs/operators';
import { ofType, Epic } from 'epix';

const logMessageEpic: Epic = (action$) => {
	return action$.pipe(
		ofType('sayHi'),
		tap(() => console.log('Hi!')),
		ignoreElements(),
	);
}

Define an action type.

type Actions = {
	type: 'sayHi';
	entityId: string;
	ev: InteractionEvent;
} | {
	type: 'sayMyName';
	name: string;
};

Use it.

const action$ = new Subject<Actions>();
startEpics<Actions, { logger: (message: string) => {} }>(epics, action$, { logger: console.log });