https://github.com/redux-saga/redux-saga-devtools

Saga monitor and UI devtool for redux-saga
https://github.com/redux-saga/redux-saga-devtools

Last synced: 20 days ago
JSON representation

Saga monitor and UI devtool for redux-saga

• Host: GitHub
• URL: https://github.com/redux-saga/redux-saga-devtools
• Owner: redux-saga
• License: mit
• Created: 2016-11-15T10:55:12.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2024-03-27T21:21:39.000Z (9 months ago)
• Last Synced: 2024-11-15T04:04:26.366Z (29 days ago)
• Language: JavaScript
• Homepage:
• Size: 343 KB
• Stars: 269
• Watchers: 18
• Forks: 39
• Open Issues: 17
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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

- [x] Structured Effect view

- [x] Actions/Reactions view (should redirect to Effect view instead (?))

- [x] JS object inspector

- [x] Highlight shared refs in the effect view (right now: Channels)

- [x] Selection management/keyboard navigation

- [x] Pin/Unpin Effect

- [x] Dockable view with resize/toggle visibility

## Todos

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

- [ ] Hide irrelevant path in the Reactions view

- [ ] Search/filter command

- [ ] Clear effect log (removes all previous Effects)

- [ ] Auto folding/Framing for long running Sagas (with a long effect list)

- [ ] Highlight shared refs for other objects (Tasks, Actions)

- [ ] top/bottom/left/right docking to the Dock view

- [ ] Add raw Effect view

- [ ] Add 'time-lined' Effect view (effects on Row, Sagas on columns, useful to debug race conditions)

- [ ] Show origin of dispatched Actions in the Reactions view (Saga, UI Component (possible?))