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

Posted 2023-02-22

技术标签:

【中文标题】调试时，我可以从浏览器控制台访问 Redux 存储吗？【英文标题】：While debugging, can I have access to the Redux store from the browser console? 【发布时间】：2016-03-26 05:11:04 【问题描述】：

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

我正在寻找类似的东西：

window._redux.store

...在浏览器中，这样我就可以在控制台上输入它并检查事情的进展情况。

我怎样才能做到这一点？

【问题讨论】：

附带说明，您可以考虑使用Redux Devtools 和the LogMonitor 来可视化您的操作和结果状态。谈到安全性，在生产构建模式下，是否可以从浏览器控制台读取存储？ @JRichardsz ***.com/questions/43507052/… 【参考方案1】：

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

2019 年 11 月更新

自我最初的回答以来，react devtools 发生了变化。 chrome 的 devtools 中的新 components 选项卡仍有数据，但您可能需要多搜索一些。

Components

store

$r.store.getState()

原答案

如果您正在运行 react 开发人员工具，则可以使用 $r.store.getState();，您的代码库无需更改。

注意：你必须先在你的开发者工具窗口中打开 react devtool 才能使这个工作，否则你会得到一个$r is not defined 错误

$r.store.getState();

$r.store.dispatch(type:"MY_ACTION")

【讨论】：

注意：为此，您需要将state 作为属性存储在根组件上。如果您关注the directions 并将<Provider> 作为***组件，这将正常工作。只是移动它被咬了！试试$r.state.store.getState() 看起来$r 指的是开发工具的Components 部分中当前选定的组件。我似乎无法通过$r 访问整个store，可能是因为我到处都在使用钩子，但是我可以看到我的组件可以看到的商店部分，这几乎一样好，有时更重要！ $r.hooks[0].subHooks[0].subHooks[0].value.store.getState() 适用于useSelector... Ob., YMMV 取决于您使用的钩子的那些组件... 我不得不使用$r.props.store【参考方案2】：

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

现在您可以像这样从控制台中的 window.store 访问商店：

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

【讨论】：

也可以访问状态：window.store.getState() 你怎么知道yourApp在生产中的名字？【参考方案3】：

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

正确的命令是：

$r.props.store.getState()

【讨论】：

应该是对这些答案的评论【参考方案4】：

您可以使用日志中间件as described in the 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），当您需要特定状态的信息时，您可以查看数组。

【讨论】：

或者更好的是，使用像redux-logger这样的库如果您要像这样导入减速器：从 './reducers/' 导入减速器，那么您可以使用 let store = createStoreWithMiddleware(reducers) 作为 './reducers/' 文件通常会里面有 combineReducers。【参考方案5】：

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

【讨论】：

【参考方案6】：

另一个答案建议将商店添加到窗口，但如果您只想将商店作为对象访问，您可以在窗口上定义一个 getter。

此代码需要添加到您配置商店的位置 - 在我的应用中，这与调用 <Provider store=store /> 的位置相同。

现在您可以在控制台中输入 reduxStore 来获取对象 - 并输入 copy(reduxStore) 将其复制到剪贴板。

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

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

【讨论】：

【参考方案7】：

如果您想查看存储状态以进行调试，您可以这样做：

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

【讨论】：

【参考方案8】：

使用 react 开发者工具：

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

【讨论】：

给出Uncaught TypeError: Cannot read property 'values' of undefined 错误【参考方案9】：

首先，你需要在window对象中定义store（你可以把它放在你的configureStore文件中）：