のユニットテストがありますreducers。ただし、ブラウザーでデバッグしているときに、アクションが正しく呼び出されているかどうか、およびそれに応じて状態が変更されているかどうかを確認したいと思います。

私は次のようなものを探しています：

window._redux.store

...ブラウザで入力して、コンソールで入力し、状況を確認できます。

どうすればそれを達成できますか？

コードを変更せずに、任意のWebサイトでreduxストアを表示する方法

2019年11月更新

私の最初の答えから、reactdevtoolsが変更されました。componentsChromeのdevtoolsの新しいタブにはまだデータがありますが、もう少し検索する必要があるかもしれません。

1. ChromedevToolsを開きます
2. reactdevtoolのComponentsタブを選択します
3. 一番上のノードをクリックし、右側の列を見て表示さstoreれます
4. store（私にとっては第4レベルでした）が見つかるまで、ツリーを下ってステップ3を繰り返します。
5. これで、以下の手順に従うことができます。 $r.store.getState()

元の回答

反応開発ツールを実行している場合は、コードベースを変更$r.store.getState();せずに使用できます。

注：これを機能させるには、最初に開発者ツールウィンドウでreact devtoolを開く必要があります。そうしないと、$r is not definedエラーが発生します。

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

let store = createStore(yourApp); window.store = store;

これで、次のようにコンソールのwindow.storeからストアにアクセスできます。

window.store.dispatch({type:"MY_ACTION"})

Redux Bookで説明されているように、ロギングミドルウェアを使用できます。

/**
 * Logs all actions and states after they are dispatched.
 */
const logger = store => next => action => {
  console.group(action.type)
  console.info('dispatching', action)
  let result = next(action)
  console.log('next state', store.getState())
  console.groupEnd(action.type)
  return result
}

let createStoreWithMiddleware = applyMiddleware(logger)(createStore)

let yourApp = combineReducers(reducers)
let store = createStoreWithMiddleware(yourApp)

または、ロギングを変更してグローバル配列（your window._redux）に追加するだけで、特定の状態に関する情報が必要なときに配列を調べることもできます。

推奨される解決策は私にはうまくいきません。

正しいコマンドは次のとおりです。

$r.props.store.getState()

Next JSを使用している場合は、次の方法でストアにアクセスできます。window.__NEXT_REDUX_STORE__.getState()

アクションをディスパッチすることもできます。オプションを確認するだけです。window.__NEXT_REDUX_STORE__

デバッグ用にストアの状態を確認したい場合は、次のようにします。

#import global from 'window-or-global'
const store = createStore(reducer)
const onStateChange = (function (global) {
  global._state = this.getState()
}.bind(store, global))
store.subscribe(onStateChange)
onStateChange()
console.info('Application state is available via global _state object.', '_state=', global._state)

別の答えは、ストアをウィンドウに追加することを提案していますが、オブジェクトとしてストアにアクセスしたいだけの場合は、ウィンドウにゲッターを定義できます。

このコードは、ストアを構成した場所に追加する必要があります。私のアプリでは、これ<Provider store={store} />は呼び出された場所と同じファイルです。

これreduxStoreで、コンソールに入力してオブジェクトを取得copy(reduxStore)し、クリップボードにコピーできます。

  Object.defineProperty(window, 'reduxStore', {
    get() {
      return store.getState();
    },
  });

これをでラップしif (process.env.NODE_ENV === 'development')て、本番環境で無効にすることができます。

反応開発ツールを使用する場合：

const store = [...__REACT_DEVTOOLS_GLOBAL_HOOK__.reactDevtoolsAgent.internalInstancesById.values()].find(e=>e.elementType.name==="Provider").pendingProps.store

まず、windowオブジェクトにストアを定義する必要があります（configureStoreファイルに配置できます）。

window.store = store;

次に、コンソールに次のように書き込むだけです。

window.store.getState();

これがお役に立てば幸いです。