Comments (7)
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:
- 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. - Pass a custom
dispatch
callback tocreateSagaMonitor
, which will get the actions and will just send them to the extension, and dispatch them there.
from redux-saga-devtools.
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.
@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.
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.
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.
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 take
s 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.
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)
- Migrate to Styled-Components HOT 6
- What with perfomance? HOT 4
- Default toggle? HOT 5
- Not working with latest React Native HOT 3
- Typo 'unkown' should be 'unknown' HOT 2
- Proptype warnings HOT 1
- Issue with the race effect under React Native
- Add tests for UI Components
- Built in examples do not work HOT 1
- Use Immer for the Reducer HOT 1
- Add getContext effect to the devtools
- How to release/publish updated versions HOT 3
- localize Effect View state
- `prop-types` errors HOT 2
- Support Redux-Saga 1.0.0 HOT 4
- add redux-saga@^0.13.0 as peerDependency HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from redux-saga-devtools.