1. ホーム
  2. javascript

[解決済み] デバッグ中に、ブラウザのコンソールからReduxストアにアクセスできますか?

2022-09-02 20:03:20

質問

私は自分の reducers . しかし、ブラウザでデバッグしているとき、私のアクションが正しく呼び出されたかどうか、そして状態がそれに応じて変更されたかどうかをチェックしたいのです。

のようなものを探しています。

window._redux.store

...をブラウザで表示して、コンソールに入力して様子を見ることができます。

どうすれば実現できるのでしょうか?

どのように解決するのですか?

コードを変更することなく、どのウェブサイトでもreduxストアを表示する方法

2019年11月更新

react devtoolsは、最初の回答から変更されました。新しい components のタブはまだデータを持っていますが、あなたはもう少し検索する必要があるかもしれません。

  1. クロームのdevToolsを開く
  2. react devtoolsを選択します。 Components タブ
  3. 一番上のノードをクリックし、右側の列で store が表示されます。
  4. を見つけるまで、手順3をツリーの下に繰り返します。 store (私の場合は4段目でした)
  5. これで、以下の手順で $r.store.getState()

オリジナルの回答

react developer toolsが動作していれば $r.store.getState(); で使用できます。 .

注意してください。 これを動作させるには、まず開発者ツールウィンドウでreact devtoolを開く必要があります。 $r is not defined のエラーが発生します。

  1. オープンデベロッパーツール
  2. Reactタブをクリックします。
  3. プロバイダノード(または最上位ノード)が選択されていることを確認します。
  4. 次に $r.store.getState(); または $r.store.dispatch({type:"MY_ACTION"}) をコンソールに入力します。