আমার ইউনিট পরীক্ষা আছে reducers। তবে, আমি যখন ব্রাউজারে ডিবাগ করছি, আমি আমার ক্রিয়াগুলি সঠিকভাবে ডেকে আনা হয়েছে কিনা এবং সেই অনুযায়ী রাষ্ট্রটি সংশোধন করা হয়েছে কিনা তা আমি খতিয়ে দেখতে চাই।
আমি এরকম কিছু খুঁজছি:
window._redux.store
... ব্রাউজারে তাই আমি কনসোলে টাইপ করতে পারি এবং কীভাবে চলছে তা যাচাই করতে পারি।
আমি কীভাবে এটি অর্জন করতে পারি?
উত্তর:
আমার আসল উত্তরের পর থেকে প্রতিক্রিয়ার ডেভলগুলি পরিবর্তন হয়েছে। componentsক্রোমের ডেভোলগুলিতে থাকা নতুন ট্যাবে এখনও ডেটা রয়েছে তবে আপনাকে আরও কিছুটা অনুসন্ধান করতে হতে পারে।
Componentsট্যাব প্রতিক্রিয়া নির্বাচন করুনstoreপ্রদর্শিত হতে ডান হাতের কলামে দেখুনstore(আমার জন্য এটি চতুর্থ স্তর ছিল)$r.store.getState()
আপনি ব্যবহার করতে পারেন চলমান ডেভেলপার টুলস প্রতিক্রিয়া যদি আপনার $r.store.getState();সঙ্গে আপনার কোডবেস কোন পরিবর্তন ।
দ্রষ্টব্য: এই কাজটি করার জন্য আপনাকে প্রথমে আপনার বিকাশকারী সরঞ্জাম উইন্ডোতে রিঅ্যাক্ট ডিভটোলটি খুলতে হবে, অন্যথায় আপনি একটি $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... ওব।,
$r.props.store
let store = createStore(yourApp);
window.store = store;
এখন আপনি উইন্ডোজ স্টোর থেকে স্টোরটি অ্যাক্সেস করতে পারেন কনসোলে এটির মতো:
window.store.dispatch({type:"MY_ACTION"})
window.store.getState()
আপনি রেডাক্স বইতে বর্ণিত লগিং মিডলওয়্যার ব্যবহার করতে পারেন :
/**
* 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) এবং যখন আপনাকে কোনও নির্দিষ্ট রাজ্যে তথ্য প্রয়োজন হয় তখন আপনি অ্যারেটিতে দেখতে পারেন।
আপনি যদি নেক্সট জেএস ব্যবহার করছেন তবে আপনি স্টোরটিতে অ্যাক্সেস করতে পারবেন: 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')উৎপাদনে এটিকে নিষ্ক্রিয় করতে।
বিক্রিয়াকারী সরঞ্জামগুলির সাথে প্রতিক্রিয়া:
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ত্রুটি দেয়
প্রথমত, আপনাকে windowঅবজেক্টে স্টোরটি সংজ্ঞায়িত করতে হবে (আপনি এটি configureStoreফাইলটিতে রাখতে পারেন):
window.store = store;
তারপরে আপনার কেবল নিম্নলিখিত কনসোলে লিখতে হবে:
window.store.getState();
আশা করি এটি সাহায্য করে।
LogMonitor