我有自己的单元测试reducers。但是，当我在浏览器中调试时，我想检查我的动作是否已正确调用以及状态是否已相应修改。

我正在寻找类似的东西：

window._redux.store

...在浏览器中，这样我就可以在控制台上键入该信息并检查运行情况。

我该如何实现？

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

更新2019年11月

自从我最初回答以来，react devtools已经更改。componentschrome devtools中的新标签仍然包含数据，但您可能需要搜索更多内容。

1. 打开chrome devTools
2. 选择react devtool的Components标签
3. 单击最顶部的节点，然后在右侧列store中显示
4. 在树上重复步骤3，直到找到store（对我来说这是第4级）
5. 现在，您可以按照以下步骤操作 $r.store.getState()

原始答案

如果您正在运行React开发人员工具$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)

或者，您可以将日志记录更改为仅追加到全局数组（您的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')以在生产中禁用它。

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

希望对您有所帮助。