zalmoxisus / remote-redux-devtools

Redux DevTools remotely.
http://zalmoxisus.github.io/monitoring/
MIT License
1.81k stars 139 forks source link

This work with redux-saga? #26

Open sibelius opened 8 years ago

zalmoxisus commented 8 years ago

There shouldn't be any problems with it. I've used both of them here, though there's an earlier version of remote-redux-devtools and redux-saga.

Of course, sagaMonitor is not part of remote-redux-devtools, so you still have to look in the console for it.

guipasmoi commented 7 years ago

Hi there, Is there any progress? may be i can help? should i try something from scratch?

zalmoxisus commented 7 years ago

@guipasmoi, thanks for bringing it up.

This issue was addressing 2 questions:

  1. preventing sagas side effects (when time travelling, hot reloading, importing states and skipping actions);
  2. monitoring sagas.

The first one is already fixed by clicking Lock button. As per the latter, I plan both to monitor effects along with actions and to integrate redux-saga-devtools. There are 2 issues there:

  1. We should have the ability to limit effects similarly to maxAge for actions, otherwise it would just freeze the app at some point.
  2. We should have the ability to link effects with the taken action, so you could click on the action, and apart from the state and diff, would be able to see effects.

If you'd like to help solving those 2 issues on redux-saga-devtools, it would be much welcome. The second one is breaking the integration the most.

Andarist commented 7 years ago

@zalmoxisus would u like to get any help with integrating redux-saga-devtools? Would love to help in pushing this project forward, although im focused at the moment on reaching v1 with redux-saga and do not have much time, always glad to help though.

zalmoxisus commented 7 years ago

@Andarist thanks for chiming in! I'm also busy right now with Redux DevTools Extension 3.0 release, then will try to get back to it.

In order to integrate redux-saga-devtools in remotedev-app (redux-devtools-extension / react-native-debugger) or to release it as a separate extension, we need assigning a unique id to actions inside redux-saga. We could keep the references while stringifing but it would require to serialize all the data on every new effect, which would be under performant.

Andarist commented 7 years ago

When I have time Ill surely would like to reach you and chat on some chat how could we approach this. Gr8 opportunity for the users (and for me in terms of learning :) ). Hope to wrap up this v1 some time in following weeks

guijesuis commented 7 years ago

Is there something i didn't understood correctly ?

We want to have an identifier on every redux action. To be able to associate redux devtools with redux saga-devtools

why are we not using a middleware and doing something like that.

let i = 0;
const ActionIdentifier = new Symbol("ActionIdentifier")

const actionIdentifierMiddleware = store => next => action => {
    if (action[ActionIdentifier] == undefined) {
        i++;
        action[ActionIdentifier] = i++;
    }
    return next(action)
}

const monitor = createSagaMonitor()
const sagaMiddleware = createSagaMiddleware({ sagaMonitor: monitor })
const store = createStore(
  rootReducer,
  applyMiddleware(actionIdentifierMiddleware, sagaMiddleware)
)
sagaMiddleware.run(rootSaga)
zalmoxisus commented 7 years ago

@guijesuis we're already storing actions indexes in Redux Devtools enhancer. The problem is how to associate those indexes with effects (not every action triggers an effect and an action can trigger multiple effects).

Currently, in Saga DevTools they are just compared as reference, which is lost after serialization. See redux-saga-devtools/src/store/selectors.js#L72 and the related issue.

I see you mean to pollute the action object. It could be a solution, but still better to be implemented on redux-saga part. Also note that Symbol is unserializable and invokes the same issue as comparing objects by reference.