我的reducers. 但是，当我在浏览器中进行调试时，我想检查是否正确调用了我的操作以及是否相应地修改了状态。
我正在寻找类似的东西：
window._redux.store
...在浏览器中，这样我就可以在控制台上输入它并检查事情的进展情况。
我怎样才能做到这一点？
调试时，我可以从浏览器控制台访问 Redux 商店吗？
IT技术
javascript
reactjs
redux
2021-04-01 22:54:47
6个回答
如何在任何网站上查看 redux 商店，无需更改代码
2019 年 11 月更新
自从我最初的回答以来，react devtools 已经发生了变化。componentschrome 的 devtools 中的新选项卡仍然有数据，但您可能需要多搜索一点。
- 打开 Chrome 开发者工具
- 选择 react devtool 的
Components选项卡 - 单击最顶部的节点并查看右侧的列
store以显示 - 在树下重复步骤 3，直到找到
store（对我来说是第 4 级） - 现在您可以按照以下步骤操作
$r.store.getState()
原答案
如果您正在运行 React 开发人员工具$r.store.getState();，则无需更改代码库即可使用。
注意：你必须先在你的开发者工具窗口中打开 react devtool 才能使这个工作，否则你会得到一个$r is not defined错误
- 开放开发者工具
- 单击react选项卡
- 确保选择了提供者节点（或最顶层节点）
- 然后在您的控制台中输入
$r.store.getState();或$r.store.dispatch({type:"MY_ACTION"})
let store = createStore(yourApp);
window.store = store;
现在您可以从控制台中的 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__
其它你可能感兴趣的问题