Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

redux-saga-devtools

yelouafi134.7kMIT0.3.0

Monitor and UI for redux-saga

javascript, redux, redux-saga, monior, devtool, react

readme

A Visual redux-saga monitor

this is still a WIP

How does it relate to other Redux devtools?

This would of course endup as a browser extension (chrome, firefox). But also intended to release as a themable React Component (or many React Components, one per view) so it can be embedded in other Redux devtools (redux-devtools-extension, reactotron or directly inside a React application)

Usage

  • npm i --save-dev redux-saga-devtools

You can see how it's used by consulting the examples. To play with you can start the 2 included demos. The F9 key toggles the dock open and closed.

  • npm run counter : cancellable counter counter example
  • npm run shopping-cart : Shopping cart example.

Note that the monitor uses the v0.13.0 of redux-saga which includes an improved monitor api.

Done so far

  • <input checked="" disabled="" type="checkbox"> Structured Effect view
  • <input checked="" disabled="" type="checkbox"> Actions/Reactions view (should redirect to Effect view instead (?))
  • <input checked="" disabled="" type="checkbox"> JS object inspector
  • <input checked="" disabled="" type="checkbox"> Highlight shared refs in the effect view (right now: Channels)
  • <input checked="" disabled="" type="checkbox"> Selection management/keyboard navigation
  • <input checked="" disabled="" type="checkbox"> Pin/Unpin Effect
  • <input checked="" disabled="" type="checkbox"> Dockable view with resize/toggle visibility

Todos

Following Todos that I can think of. Ordering doesn't reflect priority.

  • <input disabled="" type="checkbox"> Hide irrelevant path in the Reactions view
  • <input disabled="" type="checkbox"> Search/filter command
  • <input disabled="" type="checkbox"> Clear effect log (removes all previous Effects)
  • <input disabled="" type="checkbox"> Auto folding/Framing for long running Sagas (with a long effect list)
  • <input disabled="" type="checkbox"> Highlight shared refs for other objects (Tasks, Actions)
  • <input disabled="" type="checkbox"> top/bottom/left/right docking to the Dock view
  • <input disabled="" type="checkbox"> Add raw Effect view
  • <input disabled="" type="checkbox"> Add 'time-lined' Effect view (effects on Row, Sagas on columns, useful to debug race conditions)
  • <input disabled="" type="checkbox"> Show origin of dispatched Actions in the Reactions view (Saga, UI Component (possible?))