Javascript 调试时，我可以从浏览器控制台访问 Redux 商店吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34373462/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
While debugging, can I have access to the Redux store from the browser console?
提问by André Pena
I have unit tests for my reducers. However, when I'm debugging in the browser, I want to check if my actions have been called correctly and whether the state has been modified accordingly.
我的reducers. 但是，当我在浏览器中调试时，我想检查是否正确调用了我的操作以及状态是否已相应修改。
I'm looking for something like:
我正在寻找类似的东西：
window._redux.store
... in the browser so I can type that on the console and check how things are going.
...在浏览器中，所以我可以在控制台上输入并检查事情的进展情况。
How can I achieve that?
我怎样才能做到这一点？
回答by S.Kiers
How to view redux store on any website, with no code changes
如何在任何网站上查看 redux 存储，无需更改代码
Update Nov 2019
2019 年 11 月更新
The react devtools have changed since my original answer. The new componentstab in chrome's devtools still has the data, but you may have to search a little bit more.
自从我的原始答案以来，react devtools 已经发生了变化。componentschrome 的 devtools 中的新选项卡仍然有数据，但您可能需要多搜索一点。
- open chrome devTools
- select react devtool's
Componentstab - click on the top-most node and look in right-hand column for
storeto be shown - repeat step 3 down the tree until you find the
store(for me it was the 4th level) - Now you can follow the steps below with
$r.store.getState()
- 打开 Chrome 开发者工具
- 选择反应开发工具的
Components选项卡 - 单击最顶部的节点并查看右侧列
store以显示 - 在树下重复步骤 3，直到找到
store（对我来说是第 4 级） - 现在您可以按照以下步骤操作
$r.store.getState()
Original Answer
原答案
If you have react developer tools running you can use $r.store.getState();with no changes to your codebase.
如果您正在运行 React 开发人员工具$r.store.getState();，则无需更改代码库即可使用。
Note:You have to open the react devtool in your developer tools window first to make this work, otherwise you will get a $r is not definederror
注意：你必须先在你的开发者工具窗口中打开 react devtool 才能完成这项工作，否则你会得到一个$r is not defined错误
- open developer tools
- click the React tab
- ensure the provider node (or topmost node) is selected
- then type
$r.store.getState();or$r.store.dispatch({type:"MY_ACTION"})into your console
- 开放开发者工具
- 单击“反应”选项卡
- 确保选择了提供者节点（或最顶层节点）
- 然后在您的控制台中输入
$r.store.getState();或$r.store.dispatch({type:"MY_ACTION"})
回答by Adrian Silvescu
let store = createStore(yourApp);
window.store = store;
let store = createStore(yourApp);
window.store = store;
Now you can access the store from window.store in the console like this:
现在您可以从控制台中的 window.store 访问商店，如下所示：
window.store.dispatch({type:"MY_ACTION"})
window.store.dispatch({type:"MY_ACTION"})
回答by Sean Vieira
You can use a logging middleware as described in the Redux Book:
您可以使用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)
Alternatively, you could change the logging to just append to a global array (your window._redux) and you could look in the array when you needed information on a particular state.
或者，您可以将日志记录更改为仅附加到全局数组（您的window._redux），并且您可以在需要有关特定状态的信息时查看该数组。
回答by Satwik Gupta
回答by thodwris
The recommended solution doesn't work for me.
推荐的解决方案对我不起作用。
The correct command is:
正确的命令是：
$r.props.store.getState()
回答by igor
In case you would like to see store state for debugging you could do this:
如果您想查看用于调试的商店状态，您可以这样做：
#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)
回答by James Wilson
Another answer suggests adding the store to the window, but if you just want access to the store as an object, you can define a getter on the window.
另一个答案建议将商店添加到窗口，但如果您只想将商店作为对象访问，则可以在窗口上定义一个 getter。
This code needs to be added where you've configured your store - in my app, this is the same file as where <Provider store={store} />is called.
需要将此代码添加到您配置商店的位置 - 在我的应用程序中，这与<Provider store={store} />调用where 的文件相同。
Now you can type reduxStorein the console to get an object - and copy(reduxStore)to copy it to the clipboard.
现在您可以reduxStore在控制台中输入以获取对象 - 并将copy(reduxStore)其复制到剪贴板。
Object.defineProperty(window, 'reduxStore', {
get() {
return store.getState();
},
});
You can wrap this in an if (process.env.NODE_ENV === 'development')to disable it in production.
您可以将其包装在 an 中if (process.env.NODE_ENV === 'development')以在生产中禁用它。
回答by VARP-DOH
With react developer tools:
使用 React 开发者工具：
const store = [...__REACT_DEVTOOLS_GLOBAL_HOOK__.reactDevtoolsAgent.internalInstancesById.values()].find(e=>e.elementType.name==="Provider").pendingProps.store
回答by Alberto Perez
First of all, you need to define the store in the windowobject (You can place it in you configureStorefile):
首先，您需要在window对象中定义存储（您可以将其放置在您的configureStore文件中）：
window.store = store;
Then you only need to write in the console the following:
然后你只需要在控制台中写入以下内容：
window.store.getState();
Hop this helps.
跳这有帮助。
