Code Monkey home page Code Monkey logo

Comments (7)

zalmoxisus avatar zalmoxisus commented on July 21, 2024

According to the README it will endup as a browser extension and could be integrated with Redux DevTools extension as well. As the extension is in a separate process, we'll have to stringify the data from the client side everytime to get it there. So there're 2 possible implementations:

  1. To add a subscribe callback to saga monitor store, and whenever it is changed, send the state to the extension. To implement that, we'd have to remove connect from the current containers and pass the state from the root container as a prop we can change.
  2. Pass a custom dispatch callback to createSagaMonitor, which will get the actions and will just send them to the extension, and dispatch them there.

from redux-saga-devtools.

yelouafi avatar yelouafi commented on July 21, 2024

The saga monitor uses its own internal store (not the app store). The monitor is connected to the saga middleware and receives monitor events directly from it (not via redux actions).

But there maybe still an issue because monitor events may contain non serializable data (mainly functions & symbols)

from redux-saga-devtools.

zalmoxisus avatar zalmoxisus commented on July 21, 2024

@yelouafi, yes, because the store is independent we are able to implement it on the extension side and just pass actions from the client side. We can serialize functions, symbols and other special types as Redux Extension does, just it will be slower.

from redux-saga-devtools.

zalmoxisus avatar zalmoxisus commented on July 21, 2024

Basically, we'll pass a custom dispatch to createSagaMonitor from client side like:

const dispatch = (action) => { window.postMessage(action, '*') }

So, effectTriggered, effectResolved... will just call this function instead of store.dispatch.

Then on the extension side we're getting the action and do store.dispatch(action).

from redux-saga-devtools.

zalmoxisus avatar zalmoxisus commented on July 21, 2024

The problem is that parsed objects would be different here. I guess we should somehow add action id here and compare ids. This would also allow not to include the action payload in the effects multiple times, which could be huge for serialization.

from redux-saga-devtools.

yelouafi avatar yelouafi commented on July 21, 2024

the action object is stored from here. We also compare by ref here to find sagas who took an action.

If a unique id should be assigned to actions, I think it should be done on the redux-saga side because actually the saga monitor (residing in the extension process) will see 2 different objects (one in actionDispatched and another in effectResolved for take effects).

Another possible way (perhaps) is for the saga monitor to use the fact that effectResolved for take effects will occur immediately after an actionDispatched events. So when we get an effectResolved for takes we could assume it relates to the lasted dispatched action and save the info directly to the store (instead of computing it in demand)

from redux-saga-devtools.

zalmoxisus avatar zalmoxisus commented on July 21, 2024

Another possible way (perhaps) is for the saga monitor to use the fact that effectResolved for take effects will occur immediately after an actionDispatched events...

If that would work, it would be awesome. We could add a parameter with a custom createActionId which would return the action ID from Redux DevTools lifted store. So, we could select effects for actions right from Redux Monitor.

from redux-saga-devtools.

Related Issues (17)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.