Monitor your elm program with redux-devtools during development. It's really just for monitoring and inspecting state and actions. Action replay (time travel) is not supported.
How to use it?
Install the dependency:
$ npm install elm-monitor
Import and initialize
import monitor from 'elm-monitor'; ... monitor();
Copy or symlink
Monitor.elminto your source folder, via e.g.
ln -s ../node_modules/elm-monitor/src/Monitor.elm src
Open Redux Devtools in your browser and reload your app.
You should only use this during development. Elm won't build when
Monitor.elm is used, because it depends on
What if I don't use
Besides being able to monitor
Monitor.elm additionally exports:
Monitor.worker- when using
Monitor.sandbox- when using
Monitor.element- when using
Monitor.document- when using
How does it work under the hood?
It's quite simple.
Monitor.elm just logs the state on
init as well as every action and resulting state on
update to the browser console.
monitor.js connects to redux-devtools, patches
console.log to extract messages logged by
Monitor.elm, parses and transforms the log messages using
elm/parser (thx @ChristophP) and passes them over to redux-devtools.
How does it map Elm to JS data structures?
- Int, Float -> Number
- Char, String -> String
- List -> Array
- Tuple -> Array
- Type constructor -> Array
[⟨Ctor⟩, param1, param2]or String