Idea: create Plugin for Facebook Flipper

[sockeqwe]

To visualize how Actions flow through SideEffects and Reducer we could create a plugin for Facebook Flipper previously known as Sonar.

The desired outcome is to have some kind of realtime visualisation of a reduxStore() observable. We could do this with the help of some byte code manipulation that adds something like a doOnNext() to collect just enough information needed to draw such diagrams.

This is just an idea and needs an exploration phase to check if it possible to implement and actually feasible and helpful. Actually, this could become a general purpose RxJava Stream visualization tool (not limited to RxRedux)

[sgrekov]

Great idea! It can be used not only for visualization, but also for travelling to particular state by sending commands through Javascript bridge.

[davidkraus]

https://rxfiddle.net does exactly that (see https://github.com/hermanbanken/RxFiddle/tree/master/rxfiddle-jvm-collector). The visualisation and the data collection are independent from another and it is prepared to work with any rx library. Unfortunately the RxJava collector is not fully implemented and as it seems nobody is working on it.

[hermanbanken]

Feel free to work on RxFiddles jvm collector! It mostly worked, but is not fully up to date with the latest visualizer.

If you want to work on it, I can brief you how to create a valid stream to the visualizer.

[sockeqwe]

Thanks everyone for your feedback! Some more options / inspiration:

https://github.com/android10/frodo2 rxviz.com

Also, IntelliJ debugger seems to be extendable.

[ekursakov]

https://github.com/zalmoxisus/remote-redux-devtools/ provides good action-state debugging functionality. Also https://github.com/evant/redux library has some basic Android client for sending states to remotedev (https://github.com/evant/redux/blob/master/redux-monitor/src/main/java/me/tatarka/redux/monitor/MonitorMiddleware.java)

[ekursakov]

I use it with RxRedux like this:

val remoteDev = RemoteDev()

fun <S, A> Observable<A>.reduxStoreWithRemoteDev(
        initialState: S,
        sideEffects: List<SideEffect<S, A>>,
        instanceId: String,
        reducer: Reducer<S, A>
): Observable<S> {
    return reduxStore(initialState, sideEffects, wrapReducer(reducer, instanceId))
}

fun <S, A> wrapReducer(reducer: Reducer<S, A>, instanceId: String): Reducer<S, A> {
    return { state, action ->
        val newState = reducer(state, action)
        remoteDev.send(instanceId, action, newState)
        newState
    }
}

RemoteDev class here is the slightly refactored MonitorMiddleware from evant/redux. (https://gist.github.com/ekursakov/8af4ada83ec08c701db25c1ab94a1bcc) I plan to improve json serialization (use Gson or something else) and try to implement listening for state changes (it requires deserialization).

[sockeqwe]

Great initiative @ekursakov 👍

We brainstormed about this topic and I think the thing that we would like to visualize somehow is how Actions gets processed by SideEffects and how the output of SideEffects trigger other SideEffects and so on.

Also @Tapchicoma has the idea of creating a IntelliJ Plugin instead of using Flipper or other third party solutions ... However, it is worth to explore if we can reuse some of the already existing devtools I think.