Implementing Side Effects with Custom Delta

To handle custom side effects, create a custom delta. To do so, create a function that takes an options object and returns a function that takes a stream of actions$ and state$. The returned function should return its own stream of actions$ that will be piped into the store.

observeDelta also comes with a helper function for use with Kefir’s thru method. ofType takes a varying number of string constants to compare against action.type and returns a function that can be passed to thru. This function will filter the provided observable by the provided types. See below for an example.

import { Kefir, ofType } from 'brookjs';
import { SUBMIT_FORM, formSubmitSuccess, formSubmitFail } from './actions';

export default function ajaxDelta({ ajax }) {
    return (actions$, state$) => actions$.thru(ofType(SUBMIT_FORM))
        .flatMap(action =>'/api', action.payload))
        .flatMapErrors(err => Kefir.constant(formSubmitFail(err)))

Providing the ajax service through the ajaxDelta options object keeps the delta pure, making it easier to test that the delta functions as expected without having to mock the XMLHttpRequest object itself. The ajax service itself can then be isolated and tested against the mock object, reducing the amount of work done by each set of unit tests.

Note About Immediate Actions

If you need to emit an action immediately, ensure you’re not doing so on the synchronous generation of the delta stream, e.g. route parsing or cookie reading usually handled on application startup. If you do, you may run into odd behavior, as the delta has not yet been fully plugged together and may result in actions either not getting dispatched properly to other deltas or even the store itself. As recommended in “bootstrapping the application”, use an “INIT” action of some kind and respond to that to handle these initial reads.