[Feature] Dev Tools for visualising reactive flow

[inakianduaga]

Do you want to request a feature or report a bug?

Feature

What is the current behavior?

There is no easy way to gain observability on the RX data flows except for manually adding debugging info inside the code. This might not be so easy since redux-observable ultimately lets you do whatever RxJS does, but a monitoring tool like

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

would be very useful in terms of easily understanding reactivity inside an app (some things related to redux actions are visible via regular redux-devtools but "non-action" processes are "invisible".

Are there any plans in this direction?

[zepod]

Idea on how this could be done....

Directed graph

1. where actions are nodes and epics are edges
2. where actions are edges and epics are nodes

Not sure if 1) or 2) is better

The graphcould be printed onto the screen (either chrome ext. or iframe in the app?).

Collection of nodes and edges would be continuously updated during runtime, as more epics would get activated.

• At the point of individual combineEpics we know the name each epics...

combineEpics = (...epics) => {
  epics.map(({name}) => name) // names
  // ...
}

• by appending ⬇️to each Observable returned by each epic

epic(...).pipe(tap(updateGraph(epic.name)))

• by adding property epicName to action$ object we could...
• append ⬇️to each action$

action$.pipe(tap(updateGraph(action$.epicName)))

updateGraph fn is kinda hard to think about 🙄but surely could be figured out

Another question that is hanging in the air is how should be references to non-input and non-output
actions displayed on the graph. I mean those references used for takeUntil etc.

• Should they be ignored? (in such case we'd only add first usage of action$ in a epic to the graph)
• Should they be displayed differently as side-effecty actions?
• ???

So the questions are

• Do you understand what I have in mind?
• Would this satisfy your request?
• Any more opinions on implementation?
• How to solve non-input and non-output actions

[tylerweitzman]

+1 any update on this?