Sunday, 20 March 2022

reduxed-chrome-storage don't work with redux-observable

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