In previous posts, we learned how to use coeffects and effects in re-frame to have effectful event handlers that are pure functions.
The example with effects we saw, used two of re-frame's built-in effect handlers (dispatch and dispatch-later). Since the set of possible side-effects is open-ended, re-frame gives you a way to define your own effects.
In this post, we'll show how to create your own effect by defining one that writes to the local storage.
Let's have a look at an event handler using that effect that writes to the local storage:
Notice the a key-value pair having the key :write-localstore in the effects map returned by the event handler. This key-value pair is telling re-frame to do a side-effect, which is uniquely identified by that key and requires the data in the corresponding value. But, how does re-frame know how to action on the :write-localstore effect?
We have to use re-frame's reg-fx function to associate the effect key, (:write-localstore), with an effect handler, (local-store/write function):
reg-fx receives two arguments: the key that identifies the effect and the function which actions the side-effect, the effect handler.
When an event handler returns an effects map which contains a given effect key, the effect handler associated with it using reg-fx will be called to action on the effect, passing it the value associated to the effect key in the effects map.
The local-store/write function is passed a map containing the key-value pairs it has to write to the local store.
Finally, this is how we'd test the event handler using it:
being check-writing-to-local-storage-contains and check-writing-to-local-storage:
And that's all we need to know in order to create a custom effect in re-frame.