Closed alex-robert888 closed 1 month ago
What version of react-redux do you use? I'm getting this error on v8 and it does work on v7. Reading changelogs of react-redux I found that it uses new useSyncExternalStore from react 18. This package hasn't been updated for a while so it may not support this new functionality. In my case it complains about it: at useSyncExternalStore...... For now I would stay at v7 but still I hope it will be addressed and fixed
Debugging it I discovered that "this" is undefined only sometimes. Edit: all calls with this stack trace are undefined: and this is the good working stack
There's two things happening here:
webext-redux
has its Store
type written as a class, not as a closure the way the real Redux library does. So, store.getState
in webext-redux
is actually a class method that relies on this
store.getState
as an argument to useSyncExternalStore
, which will be called later as just getState()
. That means that there's no this
binding applied to the getState
call.This works fine with normal Redux, but because webext-redux
uses a class instance that explodes.
Tbh it's almost an accident that this ever worked with React-Redux until now.
So the only solution for this is to drop redux to v7?
@plusminushalf : React-Redux, yeah. Also looks like there's an open PR here in this repo (#289), but it hasn't been merged.
@plusminushalf if you want to use V8 you can use a workaround to make it work.
One possible solution is described here https://github.com/reduxjs/react-redux/issues/1963 . Creating the store like this might fix the problem.
const store = new Store()
Object.assign(store, {
dispatch: store.dispatch.bind(store),
getState: store.getState.bind(store),
subscribe: store.subscribe.bind(store),
})
Another solution would be to use a modified version of webext-redux with the applied fix. This is what I did. (You can find my rough notes in how to do that over here: https://dermeck.github.io/use-modified-npm-package/ )
btw I was having issues with thunk not working in redux toolkit, and this seems to have resolved it.
export const createStoreProxy = (portName: string) => {
const store = new Store({ portName });
const { dispatch: originalDispatch } = store;
// Fix for unresolved bug in webext-redux: https://github.com/tshaddix/webext-redux/issues/286
Object.assign(store, {
dispatch: ((action: AnyAction) => {
if (typeof action === 'function') {
// @ts-ignore
return action(store.dispatch, store.getState);
}
return originalDispatch(action);
}),
getState: store.getState.bind(store),
subscribe: store.subscribe.bind(store)
});
return store;
};
Hello,
I am trying to use the
webext-redux
package and I came across an error which I have a hard time solving.Basically, I followed the first 2 required steps from the README of the webext-redux repository.
background.js
, where I use thewrapStore
function to wrap my Redux store. The background script seems to be executing fine, with no errors:background.js
The problem occurs when I try to use a Redux selector in one of my components, to retrieve the value from the store. The
store.js
looks like this:reliabilityAnalysisSlice.js
And I use the selector like this:
const shouldShowReliabilityAnalysis = useSelector(state => state.shouldShowReliabilityAnalysis);
Which throws the following error:
There are hardly any sources on the internet that could help me, so I would higlhy appreciate if someone could lend me a hand.
Is this this package still supported and funcitonal? Or am I doing something wrong? Any hints on how to debug?