Comments (17)
@abhinavzspace @vhmth The way that this library works is through Chrome Message Passing. This page states:
A message can contain any valid JSON object (null, boolean, number, string, array, or object).
This is most likely your issue. At the end of the day, as your data moves between event, content-scripts, and popovers, it is being serialized with .toJSON()
. This will cause Immutable objects to be turned to normal JS objects.
I think there is a way we could add configuration parameters that would allow the "immutable type" to be passed with the payload, and then have the different components parse the objects back to their expected immutable before being passed around the app.
Would essentially need configuration on ProxyStore and store wrapper that would facilitate this as data is moved between them.
from webext-redux.
@abhinavzspace mind posting some error traces? We should make this lib compatible with immutable
from webext-redux.
I feel like parsing the serialized object back into immutable type on the view layer seems unnecessary. What's important is just, you can use immutable type in the store (your library seems to work with Immutable.js nicely already). Then on the react view layer, just get the state as if you are getting from a normal js object. You are not mutating it anyway. Just a thought.
from webext-redux.
@EdmundLeex Great point! I completely agree with you :)
from webext-redux.
@EdmundLeex I am doing exactly the way you mentioned. 👍
from webext-redux.
Close issue button should not be too close to comment button...... :)
from webext-redux.
BTW there is no need for compatibility with immutable.js. So it's not a real issue. Please close it if you feel like.
from webext-redux.
@abhinavzspace Sounds good! Thank you :)
from webext-redux.
What about shouldComponentUpdate
? How do we know if an object is the same or wether it has changed (when it has a deep structure)?
That was another great reason for me to use immutable
objects.
Thanks.
from webext-redux.
@SudoPlz that would be orthogonal to what @EdmundLeex was mentioning. If that's the case and you are afraid of mutations at the view layer in your content and popup scripts (which is something immutable says it protects against), we should probably go with the method of allowing for immutable types in a configuration option (like @tshaddix mentioned).
I would work on this, but, since we don't use immutable.js at Loom, it's hard to justify pushing this effort forward on my end vs. working on #65 (just being real). @SudoPlz or @abhinavzspace would either of y'all be interested in extending the store to allow for immutable data types?
from webext-redux.
Hmm, not sure if I got @tshaddix 's answer right, but it seems to me that whenever the immutable is passed as a message, it's being serialised, and the solution would be to manually create a new Immutable after we receive an object from the store.
But that would mean that we'd always have a new immutable object, and the nextProps.anImmutable !== this.props.anImmutable
would always return true;
from webext-redux.
it seems to me that whenever the immutable is passed as a message, it's being serialised, and the solution would be to manually create a new Immutable after we receive an object from the store
yes, pretty much.
nextProps.anImmutable !== this.props.anImmutable
shouldn't this be false if there is a difference if you just compare the serialized js object? Both would've been serialized by the time you compare them in the view layer.
from webext-redux.
I think @SudoPlz is correct. nextProps.anImmutable
would never equal this.props.anImmutable
since the entire object is always serialized. This lib doesn't currently do "patches" to the store. That seems to be the only way to get this right.
from webext-redux.
Bringing this issue back to life, as I am no longer able to use Immutable with this library. You cannot simply deserialize the store in the view layer with Immutable fromJS
if your state uses non-standard data structures (i.e. OrderedMap
). If there were hooks into where serialization happens on both ends of the sendMessage
it wouldn't be hard to use something like https://github.com/glenjamin/transit-immutable-js to keep things Immutable across the stack.
from webext-redux.
This got landed not too long ago:
Not a fix, but should make things a bit less "horrible" for those relying on immutability (although not perfect - esp. for this case).
How are OrderedMaps
usually handled in Redux? Is OrderedMap
typically handled/serialized ok in other Redux apps? This is a noob question, but I'm trying to get a lay of immutable.js land.
from webext-redux.
@vhmth Oh nice, will take a look at upgrading soon!
In your normal Redux application the Immutable OrderedMap object will retain it's shape (as in it will not be serialized before insertion into the store). This falls apart here across the chrome messaging port since it serializes complex objects. OrderedMap actually serializes to an object (which is obviously wrong, as you lose the order deserialization):
const om = new Immutable.OrderedMap([['foo', 1], ['bar', 2]])
JSON.stringify(om)
//=> "{"foo":1,"bar":2}"
from webext-redux.
@corytheboyd this is super late, but is this still an issue for you? I won't be able to tackle this kinda functionality, but I wanna make sure this doesn't slip through the cracks.
from webext-redux.
Related Issues (20)
- Hot reloading using yarn start leads to error - chrome.runtime.connect() called from a webpage must specify an Extension ID
- Ensure chrome api available before checking lastError
- Mozilla WebExtension-Polyfill support? HOT 3
- What is way to creating Chrome extention with default create-react-app?
- Cannot read properties of undefined (reading 'error') HOT 1
- Storyful is using webext-redux
- wrapStore tabs.query has extra argument
- "can't access dead object" while developing on Firefox
- saga middleware typescript problem
- Question: Advise for hot reloading in development HOT 1
- Doesn't work with react-redux v8 HOT 3
- Is manifest version 3 support planned? HOT 3
- How to fix Uncaught TypeError: Cannot read properties of undefined (reading 'state') HOT 7
- Data not persisting HOT 2
- React Redux State updated value not showing on page refresh
- Is this repo still actively maintained & supported?
- middleware warning when using rtk-query
- useselector not working despite providing store
- How to re-sync store from "content script" with background.js (service worker)? HOT 2
- Cannot install webext-redux next to react-redux
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 webext-redux.