@mariosant/storeon-streams NPM

storeon-streams

Side effects management library for storeon

Why?

Reactive functional programming (RFP) can help you write complex async scenarios in a beautiful way.

You can easily write autosuggestion logic, optimistic operations and other complex async functionality without the mess.

This library can help you do that in a smooth, elegant, without having to restructure your current storeon modules. Most important, you do not have to ditch the nice async storeon's support!

Install

There is a published package at npm for easy installation. Don't forget to add kefir too, as this library depends on it!

$ npm install @mariosant/storeon-streams kefir

Quick example

Here's a side effect that triggers time/tick every second, ten times.

import { interval } from "kefir";
import { fromStoreon } from "@mariosant/storeon-streams";

const time = (store) => {
  store.on("@init", () => ({}));
  store.on("time/tick", () => {
    const today = new Date();
    const currentTime =
      today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();

    return { time: currentTime };
  });

  // yeap this is it.
  fromStoreon(store, () => interval(1000, ["time/tick"]).take(10));
};

export default time;

View a more advanced example that handles optimistic save on Codesandbox.

Usage

The module has a minimal api in the form of es exports.

fromStoreon

fromStoreon is what you will be using for 90% of the time. It is responsible for connecting a kefir stream with your store.

fromStoreon(store, ({actionStream, changeStream, dispatchStream}) => Stream<[event, payload]>)

The plugin will emit actions, everytime the stream emits an event - so make sure the stream will emit only [event, payload] values.

actionStream is a kefir stream that emits when a specific action is emitted. ie actionStream('user/save')

changeStream is a kefir stream that emits when the store changes. This is using @changed event internally.

dispatchStream is a kefir stream that emits when an action is being dispatched. This is using @dispatch event internally.

Both of them are emitting the default values of storeon, wrapped in an array for easy destructuring.

fromStoreonModule

Sometimes you want a storeon module that deals only with side effects. fromStoreonModule is a wrapper that does exactly that.

const sideEffectsModule = fromStoreonModule(() =>
  interval(1000, ["time/tick"]).take(10)
);

const store = createStoreon([moduleA, moduleB, sideEffectsModule]);

isAction

When you are subscribing to dispatchStream, chances are you would like to subscribe to a specific one. isAction is a helper to do this quickly.

import { fromStoreon, isAction } from "@mariosant/storeon-streams";

fromStoreon(store, ({ dispatchStream }) =>
  dispatchStream.filter(isAction("some/action"))
);