web-dev-qa-db-ja.com

devtoolsなしでコンソールでReduxストアのコンテンツを取得するにはどうすればよいですか？

React Devtoolsがインストールされていると、次の方法でストアを取得できます。

$r.store.getState()

そして、React Devtoolsなしでそれを行う方法は？

javascriptreactjsreduxreact-devtools
7
ku8ar

私はウィンドウに何も割り当てることができず、reactまたはredux開発ツールを使用する機会もありませんでした。

これは明らかに文書化されておらず、もろいですが、reduxのあるいくつかの異なるサイトでうまくいくように見えました。コンソール内の状態（マイナーな調整を加えたストア）へのアクセスを出力します。

IDがreact-rootのdomノードに反応してレンダリングしていると仮定します。

const appStates = []
const reactRoot = document.getElementById('react-root')
let base

try {
    base = reactRoot._reactRootContainer._internalRoot.current
} catch (e) {
    console.log('Could not get internal root information from reactRoot element')   
}

while (base) {
    try {
        state = base.pendingProps.store.getState()
        // This also sometimes works...
        // state = base.stateNode.store.getState()
        appStates.Push(state)
    } catch (e) {
        // no state
    }
    base = base.child
}

console.log('Application States', appStates)
9
Eamonn Gahan

オプション1

開発モードのときにストアをwindowにアタッチしてから、コンソールからアクセスできます。

_if(env === 'dev') { // only an example - you'll need to tailor this to your build system
    window.store = store;
}
_

これで、コンソールから直接アクセスできます。

_store.getState()
_

オプション2（クローム）

  1. ストア作成後console.log(store)。
  2. コンソールで、ストアを右クリックし、_Store as global variable_を選択します。
  3. _temp1_（または他の変数を作成した場合はtempX）という名前の新しい変数を取得します。
  4. これで、temp1.getState()を使用できます。

コンソールステートメントをクリアすることを忘れないでください（通常はビルドの一部として実行されます）。

4
Ori Drori

最も簡単な方法は、ストアを作成した直後にグローバルwindowに割り当てることだと思います。

const myStore = createStore();

if(process.env.NODE_ENV !== 'production') {
  window.store = myStore;
}

その後、次のようにブラウザコンソールでアクセスできます。

store.getState();
2
Tomasz Mularczyk

ストアにアクセスする最も簡単な方法は、おそらくreact-reduxのプロバイダーを使用することです。ストアをこのコンポーネントに渡すと、要素ツリーの下のすべての子がストアを利用できるようになります。ストアは、ReactのコンテキストAPIを介して利用可能になります。

したがって、プロバイダーの子コンポーネントでは、次のようなことができます。

render() {
  const { store } = this.context;
  console.log(store)
  return(
  ...
  )
}

これは、react-reduxの接続HOCがストアにアクセスできるのと同じ方法です。

また、Reduxには素晴らしい devtools chrome extension があることをご存知ですか？これにより、状態とアクションの履歴が保持されるため、アプリケーションのライフサイクルの変更を追跡できます。これが最善の解決策かもしれません!!

1
Thomas