如何在任何网站上查看redux商店，无需更改代码

2019年11月更新

react devtools在我最初的回答之后已经改变了，chrome devtools中新的components标签页仍然有数据，但是你可能需要再搜索一点。
1.打开chrome devTools
1.选择react devtool的Components选项卡
1.单击最上面的节点并在右列中查找要显示的store
1.重复步骤3，直到找到store（对我来说是第4层）
1.现在，您可以使用$r.props.store.getState()执行以下步骤

原始答案

如果你运行了react开发者工具，你可以使用$r.store.getState();不改变你的代码库。

**注意：**必须先在开发者工具窗口中打开react devtool才能使其工作，否则将得到$r is not defined错误

1.开放式开发工具
1.单击React选项卡
1.确保已选择提供程序节点（或最顶层节点
1.然后在控制台中键入$r.store.getState();或$r.store.dispatch({type:"MY_ACTION"})

let store = createStore(yourApp); window.store = store;
现在，您可以在控制台中从www.example.com访问存储window.store，如下所示：
window.store.dispatch({type:"MY_ACTION"})

推荐的解决方案对我不起作用。
正确的命令为：

$r.props.store.getState()

您可以使用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)

或者，您可以将日志记录更改为仅附加到一个全局数组（您的window._redux），并且当您需要特定状态的信息时，可以查看该数组。

如果您使用的是Next JS，则可以通过以下方式访问商店：window.__NEXT_REDUX_STORE__.getState()
您还可以分派操作，只需查看window.__NEXT_REDUX_STORE__中的选项即可

另一个答案建议将存储添加到窗口中，但如果您只想以对象的形式访问存储，则可以在窗口上定义一个getter。
此代码需要添加到您配置商店的位置-在我的应用程序中，这与调用<Provider store={store} />的文件相同。
现在，您可以在控制台中输入reduxStore来获取对象，然后输入copy(reduxStore)将其复制到剪贴板。

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

您可以将其 Package 在if (process.env.NODE_ENV === 'development')中以在生产环境中禁用它。

如果您希望查看存储状态以进行调试，可以执行以下操作：

#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)

使用React开发者工具：

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();

希望能帮上忙。