調試時，我可以通過瀏覽器控制檯訪問Redux存儲嗎？

我有我的reducers單元測試，因爲我應該有。但是，當我在瀏覽器中進行調試時，我想檢查我的操作是否已被正確調用以及狀態是否已相應修改。調試時，我可以通過瀏覽器控制檯訪問Redux存儲嗎？

我在尋找類似：

window._redux.store

...在瀏覽器中，所以我可以鍵入在控制檯上，並檢查東西是怎麼回事。

我該如何做到這一點？

來源

2015-12-19 André Pena

作爲一個側面說明，你可能會考慮使用[終極版Devtools]（https://github.com/gaearon/redux-devtools）以及[LogMonitor']（https://github.com/gaearon/redux-devtools-log-monitor）來可視化您的操作和結果狀態。 –

談談安全性，在生產構建模式下，是否可以從瀏覽器控制檯讀取存儲？ – JRichardsz

您可以使用日誌中間件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），你可以看看在陣列中，當你需要在一個信息特定狀態。

來源

2015-12-19 17:56:39

甚至更好，請使用類似[redux-logger]（https://www.npmjs.com/package/redux-logger）的圖書館 –

@downvoter - 我可以做些什麼來使答案更好？ –

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

現在你可以從window.store訪問存儲在控制檯這樣的：

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

來源

2016-06-07 23:14:55

並且還可以訪問狀態： 'window.store.getState（）' –

如果有反應，開發工具運行，您可以使用$r.store.getState();與沒有改變你的代碼庫。

注：你要打開你的開發人員工具窗口第一反應devtool，使這項工作，否則你將得到一個$r is not defined錯誤

開放的開發工具
點擊陣營標籤
確保提供者節點（或最上面的節點）被選擇
然後鍵入$r.store.getState();到控制檯

來源

2017-06-01 23:11:29

如果你想看到店狀態調試，你可以這樣做：

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

來源

2017-07-14 13:33:32 igor

調試時，我可以通過瀏覽器控制檯訪問Redux存儲嗎？

回答

相關問題