मेरे पास मेरे लिए यूनिट परीक्षण हैं reducers। हालांकि, जब मैं ब्राउज़र में डिबगिंग कर रहा हूं, तो मैं यह जांचना चाहता हूं कि क्या मेरे कार्यों को सही तरीके से बुलाया गया है और क्या राज्य को तदनुसार संशोधित किया गया है।
मैं कुछ इस तरह की तलाश में हूँ:
window._redux.store
... ब्राउज़र में इसलिए मैं कंसोल पर टाइप कर सकता हूं और जांच सकता हूं कि चीजें कैसे चल रही हैं।
मैं उसे कैसे प्राप्त कर सकता हूं?
जवाबों:
मेरे मूल उत्तर के बाद से प्रतिक्रिया विचलन बदल गए हैं। componentsक्रोम के डैटूल में नए टैब में अभी भी डेटा है, लेकिन आपको थोड़ा और खोज करना पड़ सकता है।
Componentsटैब को चुनेंstoreदिखाए जाने के लिए दाहिने हाथ के कॉलम में देखेंstore(मेरे लिए यह 4 वां स्तर था)$r.store.getState()
आप उपयोग कर सकते चल डेवलपर उपकरण प्रतिक्रिया यदि आपके पास $r.store.getState();के साथ अपने codebase में कोई परिवर्तन नहीं ।
नोट: आपको यह काम करने के लिए सबसे पहले अपने डेवलपर टूल विंडो में रिएक्शन देवटूल को खोलना होगा, अन्यथा आपको एक $r is not definedत्रुटि मिलेगी
$r.store.getState();या $r.store.dispatch({type:"MY_ACTION"})अपने कंसोल मेंstateअपने मूल घटक पर एक संपत्ति के रूप में संग्रहीत करने की आवश्यकता है । यदि आप निर्देशों का पालन करते हैं और <Provider>शीर्ष-स्तरीय घटक के रूप में हैं, तो यह ठीक काम करेगा। बस थोड़ा सा इधर उधर हो जाने से!
$r.state.store.getState()
$rके Componentsअनुभाग में वर्तमान में चयनित घटक को संदर्भित करता है । मुझे लगता है मैं पूरी तरह storeसे उपयोग करने में सक्षम नहीं हो सकता है $r, हो सकता है क्योंकि मैं हर जगह हुक का उपयोग कर रहा हूं, लेकिन मुझे स्टोर का वह हिस्सा देखने को मिलता है जिसे मेरा घटक देख सकता है, जो लगभग उतना ही अच्छा है, और कभी-कभी अधिक बिंदु!
$r.hooks[0].subHooks[0].subHooks[0].value.store.getState()उन घटकों के लिए काम करता है जो useSelector... Ob।, YMMV आपके द्वारा उपयोग किए जाने वाले हुक के आधार पर ...
$r.props.store
let store = createStore(yourApp);
window.store = store;
अब आप इस तरह से कंसोल में window.store से स्टोर तक पहुँच सकते हैं:
window.store.dispatch({type:"MY_ACTION"})
window.store.getState()
आप Redux बुक में वर्णित लॉगिंग मिडलवेयर का उपयोग कर सकते हैं :
/**
* 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__
यदि आप डिबगिंग के लिए स्टोर स्टेट देखना चाहते हैं तो आप ऐसा कर सकते हैं:
#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)
एक अन्य जवाब में दुकान को खिड़की से जोड़ने का सुझाव दिया गया है, लेकिन अगर आप सिर्फ एक वस्तु के रूप में दुकान तक पहुंच चाहते हैं, तो आप खिड़की पर एक गटर को परिभाषित कर सकते हैं।
इस कोड को जोड़ने की आवश्यकता है जहां आपने अपना स्टोर कॉन्फ़िगर किया है - मेरे ऐप में, यह वही फ़ाइल है जहां <Provider store={store} />कहा जाता है।
अब आप reduxStoreकंसोल में एक ऑब्जेक्ट प्राप्त करने के लिए टाइप कर सकते हैं - और copy(reduxStore)इसे क्लिपबोर्ड पर कॉपी करने के लिए।
Object.defineProperty(window, 'reduxStore', {
get() {
return store.getState();
},
});
if (process.env.NODE_ENV === 'development')उत्पादन में इसे निष्क्रिय करने के लिए आप इसे लपेट सकते हैं ।
सबसे पहले, आपको windowऑब्जेक्ट में स्टोर को परिभाषित करने की आवश्यकता है (आप इसे आप configureStoreफ़ाइल में रख सकते हैं ):
window.store = store;
फिर आपको केवल निम्नलिखित कंसोल में लिखने की आवश्यकता है:
window.store.getState();
हॉप यह मदद करता है।
LogMonitor