Saya memiliki tes unit untuk saya reducers . Namun, saat saya men-debug di browser, saya ingin memeriksa apakah tindakan saya telah dipanggil dengan benar dan apakah status telah dimodifikasi dengan semestinya.

Saya mencari sesuatu seperti:

window._redux.store

... di browser sehingga saya dapat mengetiknya di konsol dan memeriksa bagaimana keadaannya.

Bagaimana saya bisa mencapai itu?

Cara melihat toko redux di situs web apa pun, tanpa perubahan kode

Perbarui November 2019

Alat pengembang react telah berubah sejak jawaban asli saya. componentsTab baru di devtools chrome masih memiliki datanya, tetapi Anda mungkin harus mencari lebih banyak lagi.

1. buka chrome devTools
2. pilih Componentstab react devtool
3. klik pada simpul paling atas dan cari di kolom kanan untuk storeditampilkan
4. ulangi langkah 3 ke bawah pohon sampai Anda menemukan store(bagi saya itu adalah tingkat ke-4)
5. Sekarang Anda dapat mengikuti langkah-langkah di bawah ini dengan $r.store.getState()

Jawaban Asli

Jika Anda memiliki bereaksi alat pengembang berjalan Anda dapat menggunakan $r.store.getState();dengan tidak ada perubahan ke basis kode Anda .

Catatan: Anda harus membuka react devtool di jendela alat pengembang Anda terlebih dahulu untuk membuat ini berfungsi, jika tidak Anda akan mendapatkan $r is not definedkesalahan

1. buka alat pengembang
2. klik tab React
3. pastikan node penyedia (atau node paling atas) dipilih
4. lalu ketik $r.store.getState();atau $r.store.dispatch({type:"MY_ACTION"})ke konsol Anda

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

Sekarang Anda dapat mengakses store dari window.store di konsol seperti ini:

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

Anda dapat menggunakan middleware logging seperti yang dijelaskan di Buku 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)

Alternatifnya, Anda dapat mengubah pencatatan menjadi hanya menambahkan ke larik global (milik Anda window._redux) dan Anda dapat melihat di larik saat Anda membutuhkan informasi tentang keadaan tertentu.

Solusi yang disarankan tidak berhasil untuk saya.

Perintah yang benar adalah:

$r.props.store.getState()

Jika Anda menggunakan JS Berikutnya , Anda dapat mengakses penyimpanan dengan: window.__NEXT_REDUX_STORE__.getState()

Anda juga dapat mengirimkan tindakan, lihat saja opsi yang Anda miliki diwindow.__NEXT_REDUX_STORE__

Jika Anda ingin melihat status penyimpanan untuk debugging, Anda dapat melakukan ini:

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

Jawaban lain menyarankan untuk menambahkan toko ke jendela, tetapi jika Anda hanya ingin mengakses toko sebagai objek, Anda dapat menentukan pengambil di jendela.

Kode ini perlu ditambahkan di tempat Anda telah mengonfigurasi toko Anda - di aplikasi saya, ini adalah file yang sama dengan tempat <Provider store={store} />dipanggil.

Sekarang Anda dapat mengetik reduxStoredi konsol untuk mendapatkan objek - dan copy(reduxStore)menyalinnya ke clipboard.

  Object.defineProperty(window, 'reduxStore', {
    get() {
      return store.getState();
    },
  });

Anda dapat membungkus ini if (process.env.NODE_ENV === 'development')untuk menonaktifkannya dalam produksi.

Dengan alat pengembang react:

const store = [...__REACT_DEVTOOLS_GLOBAL_HOOK__.reactDevtoolsAgent.internalInstancesById.values()].find(e=>e.elementType.name==="Provider").pendingProps.store

Pertama-tama, Anda perlu menentukan penyimpanan di windowobjek (Anda dapat menempatkannya di configureStorefile Anda ):

window.store = store;

Maka Anda hanya perlu menulis di konsol berikut ini:

window.store.getState();

Semoga ini bisa membantu.