在调试时，我可以从浏览器控制台访问 Redux 存储吗？

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

我要找的是这样的东西:

window._redux.store

... 这样我就可以在控制台上输入然后看看进展如何。

我怎么才能做到呢？

103515 次浏览
小开

您可以使用日志中间件 正如 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) ，并且在需要关于特定状态的信息时可以查看数组。

小开

Let store = createStore (yourApp) ; Store = store;

现在，您可以像下面这样从控制台的 window.store 访问存储:

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

小开
最佳答案

如何查看任何网站上的 redux 存储，没有代码更改

2019年11月更新

自从我最初的回答以来，反应 Devtools 已经改变了。新的 components标签在 chrome 的 devtools 中仍然有数据，但是你可能需要搜索更多一点。

  1. 开放式 chrome devTools
  2. 选择 response devtool 的 Components选项卡
  3. 单击最上面的节点，然后在右边的列中查找要显示的 store
  4. 重复第3步，直到你找到 store(对我来说是第4级)
  5. 现在您可以使用 $r.store.getState()执行下面的步骤

Example screenshot

原始答案

如果您已经运行了反应开发人员工具，那么您可以将 $r.store.getState();与 代码库没有变化一起使用。

注意: 您必须首先在您的开发人员工具窗口中打开 response devtool 才能使其工作，否则您将得到一个 $r is not defined错误

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

如果您希望查看存储状态以进行调试，可以这样做:

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

如果您正在使用 下一个 JS，您可以通过以下方式访问存储: window.__NEXT_REDUX_STORE__.getState() < br/> < br/> 您还可以分派操作，只需查看 window.__NEXT_REDUX_STORE__中的选项

小开

使用反应开发工具:

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

希望这个能帮上忙。

小开

另一个答案建议将存储添加到窗口中，但是如果您只想以对象的形式访问存储，则可以在窗口中定义一个 getter。

这段代码需要添加到您已经配置了您的存储-在我的应用程序中，这是相同的文件作为 <Provider store={store} />被调用。

现在，您可以在控制台中键入 reduxStore来获取一个对象，然后键入 copy(reduxStore)来将其复制到剪贴板。

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

您可以将其包装在 if (process.env.NODE_ENV === 'development')中，以便在生产中禁用它。

小开

推荐的解决方案对我不起作用。

正确的命令是:

$r.props.store.getState()

提交答案