Where in Angular app should I call devTools()

[thomas-w-grant]

❓ Where in my Angular app should I make the call to devTools()?

It seems like no matter where I put my call to devTools(), I get the message in the redux dev tool extension that there is no store defined. I have tried in main.ts, app.module, and app.compontnet.ts.

When I look at the source code for devTools method, I see that only register$ is being observed. There is no check for existing stores in the register before subscribing to register$. It seems to me that this code will only work if devTools is called before any stores are added to register. When I follow Elf documentation for the repository pattern, I see that new Store is called outside of the class. No matter where I have placed my call to devTools, the store is always created first. Which means the devTools is never aware of any stores and hence why I get the message in the extension saying there are no stores.

[thomas-w-grant]

When I change the code for devTools to the following, I get what I expected in the extension.

export function devTools(options: DevtoolsOptions = {}) {
  if (!window.__REDUX_DEVTOOLS_EXTENSION__) return;

  const instance = window.__REDUX_DEVTOOLS_EXTENSION__.connect(options);
  const subscriptions = new Map<string, Subscription>();

  const send = (action: Action) => {
    instance.send(action, getStoresSnapshot());
  };

  if (options.actionsDispatcher) {
    subscriptions.set(
      'actionsDispatcher',
      options.actionsDispatcher.subscribe((action) => {
        send(action);
      })
    );
  }

  const addStore = (store: Store<any, any>) => {
    const name = store.name;
    const displayName = capitalize(name);

    send({ type: `[${displayName}] - @Init` });

    const update = store.pipe(skip(1)).subscribe(() => {
      options.preAction?.();
      send({ type: `[${displayName}] - Update` });
    });

    subscriptions.set(name, update);
  };

  const registry = getRegistry();

  registry.forEach((store) => {
    addStore(store);
  });

  const subscription = registry$.subscribe(({ store, type }) => {
    const name = store.name;
    const displayName = capitalize(name);

    if (type === 'add') {
      addStore(store);
    }

    if (type === 'remove') {
      subscriptions.get(name)?.unsubscribe();
      subscriptions.delete(name);
      send({ type: `Remove ${displayName}` });
    }
  });

  const devtoolsDispose = instance.subscribe((message) => {
    if (message.type === 'DISPATCH') {
      const payloadType = message.payload.type;

      if (payloadType === 'COMMIT') {
        instance.init(getStoresSnapshot());
        return;
      }
    }
  });

  return {
    unsubscribe() {
      subscription.unsubscribe();
      instance.unsubscribe();
      subscriptions.forEach((sub) => sub.unsubscribe());
      devtoolsDispose();
    },
  };
}

[NetanelBasal]

Your store was probably initialized before you called the devTools function. If we follow the README example, we can solve it by ensuring that the first import in main.ts is the devTools call.

Nevertheless, I can see why it wouldn't be an enjoyable task, so I'll see if we can add the functionality you suggest.

[NetanelBasal]

The latest version includes this. Enjoy.

[thomas-w-grant]

Wow. That was fast. Thanks.