Como acessar o estado do Redux de um production build usando o console do browser

Escrito em 20 de fevereiro de 2022 - 🕒 1 min. de leitura

Às vezes você quer debugar o estado do Redux em produção, mas o redux-devtools só está habilitado para development, o que fazer numa situação dessas?

redux state on instagram

TL;DR

Rode o script abaixo no browser.

const internalRoot = Array.from(document.querySelectorAll("*[id]")).find((el) => el?._reactRootContainer?._internalRoot?.current)?._reactRootContainer?._internalRoot?.current;
const state = (internalRoot?.pendingProps?.store || internalRoot?.stateNode?.store || internalRoot?.memoizedState?.element?.props?.store)?.getState?.();

Acessando todos os estados do Redux

Recentemente eu tive que debugar um problema em produção que eu precisava para acessar o estado do Redux, então me deparei com esta solução, que precisava que a extensão React DevTools fosse instalada no browser, eu testei e realmente funcionou, mas depois fiquei pensando como isso poderia ser feito sem o uso de extensões.

Depois de pesquisar um pouco, encontrei esta solução no Stack Overflow, o que me levou a criar o seguinte script:

// Traverse a dom element
const stores = new Set();
const traverse = (element) => {
  let store =
    internalRoot?.memoizedState?.element?.props?.store
    || internalRoot?.pendingProps?.store
    || internalRoot?.stateNode?.store;

  if (store) {
    stores.add(store);
  }

  if (element.child) {
    traverse(element.child);
  }
};

// Find the root element for React
const reactRoot = Array.from(document.querySelectorAll("*[id]")).find((el) => el?._reactRootContainer?._internalRoot?.current);

const internalRoot = reactRoot._reactRootContainer._internalRoot.current;

// Traverse the root react element to find all Redux States in the app
traverse(internalRoot);

Após executar este script, todos os estados Redux estarão disponíveis dentro da variável stores, e você pode acessá-los via stores.forEach((store) => store.getState()).

Nos vemos na próxima, galera!

Tags:


Publicar um comentário

Comentários

Nenhum comentário.