ฉันมีการทดสอบหน่วยสำหรับreducersไฟล์. อย่างไรก็ตามเมื่อฉันทำการดีบักในเบราว์เซอร์ฉันต้องการตรวจสอบว่าการกระทำของฉันถูกเรียกอย่างถูกต้องหรือไม่และสถานะได้รับการแก้ไขตามนั้นหรือไม่

ฉันกำลังมองหาสิ่งที่ต้องการ:

window._redux.store

... ในเบราว์เซอร์เพื่อให้ฉันพิมพ์สิ่งนั้นบนคอนโซลและตรวจสอบว่าสิ่งต่างๆเป็นอย่างไร

ฉันจะบรรลุสิ่งนั้นได้อย่างไร?

วิธีดูร้านค้า redux บนเว็บไซต์ใด ๆ โดยไม่มีการเปลี่ยนแปลงรหัส

อัปเดตพฤศจิกายน 2019

เครื่องมือตอบสนองมีการเปลี่ยนแปลงตั้งแต่คำตอบเดิมของฉัน componentsแท็บใหม่ใน devtools ของ chrome ยังคงมีข้อมูลอยู่ แต่คุณอาจต้องค้นหาอีกเล็กน้อย

1. เปิด Chrome devTools
2. เลือกComponentsแท็บreact devtool
3. คลิกที่โหนดบนสุดและดูในคอลัมน์ทางขวามือเพื่อstoreให้แสดง
4. ทำซ้ำขั้นตอนที่ 3 ลงต้นไม้จนกว่าคุณจะพบstore(สำหรับฉันมันคือระดับที่ 4)
5. ตอนนี้คุณสามารถทำตามขั้นตอนด้านล่างด้วย $r.store.getState()

คำตอบเดิม

หากคุณมีการตอบสนองเครื่องมือสำหรับนักพัฒนาที่ทำงานคุณสามารถใช้$r.store.getState();กับการเปลี่ยนแปลง codebase

หมายเหตุ:คุณต้องเปิดเครื่องมือตอบกลับในหน้าต่างเครื่องมือสำหรับนักพัฒนาของคุณก่อนจึงจะสามารถใช้งานได้มิฉะนั้นคุณจะได้รับ$r is not definedข้อผิดพลาด

1. เปิดเครื่องมือสำหรับนักพัฒนา
2. คลิกแท็บ React
3. ตรวจสอบให้แน่ใจว่าได้เลือกโหนดผู้ให้บริการ (หรือโหนดบนสุด)
4. จากนั้นพิมพ์$r.store.getState();หรือ$r.store.dispatch({type:"MY_ACTION"})ลงในคอนโซลของคุณ

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

ตอนนี้คุณสามารถเข้าถึง store ได้จาก window.store ในคอนโซลดังนี้:

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

คุณสามารถใช้มิดเดิลแวร์การบันทึกตามที่อธิบายไว้ใน 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) และคุณสามารถดูในอาร์เรย์เมื่อคุณต้องการข้อมูลเกี่ยวกับสถานะใดสถานะหนึ่ง

วิธีแก้ปัญหาที่แนะนำไม่ได้ผลสำหรับฉัน

คำสั่งที่ถูกต้องคือ:

$r.props.store.getState()

หากคุณใช้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)

คำตอบอื่นแนะนำให้เพิ่ม store ลงในหน้าต่าง แต่ถ้าคุณต้องการเข้าถึง store เป็นวัตถุคุณสามารถกำหนด getter บนหน้าต่างได้

ต้องเพิ่มรหัสนี้ในตำแหน่งที่คุณกำหนดค่าร้านค้าของคุณ - ในแอปของฉันนี่เป็นไฟล์เดียวกับที่<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

ก่อนอื่นคุณต้องกำหนดที่เก็บในwindowวัตถุ (คุณสามารถวางไว้ในconfigureStoreไฟล์ของคุณ):

window.store = store;

จากนั้นคุณจะต้องเขียนในคอนโซลดังต่อไปนี้:

window.store.getState();

หวังว่านี่จะช่วยได้