I'm bootstrapping a manifest-v3 extension project with react/redux and use a redux interface for chrome.storage
called reduxed-chrome-storage
for state synchronization across extension pages.
I followed redux-observable
setup page to install the middleware as well as the redux-devtools/core
setup page to get a redux log monitor. I'm actually just testing a simple ping/pong state as described in redux-observable
example page. Everything was working as expected at this point.
Then i tried to setup reduxed-chrome-storage
following the informations on the repo but it seems that it break the middlewares i've just setup. I guess the function createStore
hooked by reduxed-chrome-storage
is not called in a way that register them properly. When dispatching an action, it isn't catched by my epic and i get this warning:
redux-observable | WARNING: this middleware is already associated with a store. createEpicMiddleware should be called for every store.
Also the redux-devtools does not show up and trigger this error:
Redux DevTools could not render. Did you forget to include DevTools.instrument() in your store enhancer chain before using createStore()?
Here's the root store logic:
// src/store/store.ts
import reduxedStorageCreatorFactory from "reduxed-chrome-storage";
import { applyMiddleware, compose, createStore } from "redux";
import { REDUXED_STORE_ROOT_KEY } from "../constants";
import { createEpicMiddleware } from "redux-observable";
import RootReducer from "./reducers";
import RootEpic from "./epics";
import DevTools from "../utils/DevTools/ReduxDevTools";
const RCSOptions = {
createStore,
storageKey: REDUXED_STORE_ROOT_KEY,
};
export const configureStore = async () => {
const epicMiddleware = createEpicMiddleware();
const enhancer = compose(
applyMiddleware(epicMiddleware),
DevTools.instrument()
);
const asyncStoreCreator = reduxedStorageCreatorFactory(RCSOptions);
const store = await asyncStoreCreator(
RootReducer,
{ ping: { isPinging: false } },
enhancer
);
epicMiddleware.run(RootEpic);
return store;
};
export default configureStore;
Here's the repo branch you can clone to reproduce the issue: https://github.com/v1s10n-4/miniweb/tree/feature/setup-store
FYI the repo is using yarn 3 with zero-install (PnP)
just run yarn start
to open a browser, then open a new tab to show the extension page
How can i get reduxed-chrome-storage
working with my middlewares?
from reduxed-chrome-storage don't work with redux-observable
No comments:
Post a Comment