Benim için birim testlerim var reducers. Ancak, tarayıcıda hata ayıklarken, eylemlerimin doğru şekilde çağrılıp çağrılmadığını ve durumun buna göre değiştirilip değiştirilmediğini kontrol etmek istiyorum.

Şunun gibi bir şey arıyorum:

window._redux.store

... tarayıcıda, böylece konsola yazabilir ve işlerin nasıl gittiğini kontrol edebilirim.

Bunu nasıl başarabilirim?

Redux mağazası herhangi bir web sitesinde kod değişikliği olmadan nasıl görüntülenir

Kasım 2019 Güncellemesi

İlk cevabımdan bu yana tepki geliştiricileri değişti. componentsChrome'un geliştiricilerindeki yeni sekme hala verilere sahip, ancak biraz daha fazla arama yapmanız gerekebilir.

1. chrome devTools'u aç
2. react devtool'un Componentssekmesini seçin
3. En üstteki düğümü tıklayın ve storegösterilmek için sağdaki sütuna bakın
4. bulana kadar ağaçta 3. adımı tekrarlayın store(benim için 4. seviyeydi)
5. Şimdi aşağıdaki adımları takip edebilirsiniz. $r.store.getState()

Orijinal Cevap

Eğer varsa kullanabilirsiniz çalışan geliştirici araçları tepki $r.store.getState();ile sizin kod tabanına hiçbir değişiklik .

Not: Bunun çalışması için önce geliştirici araçları pencerenizdeki react devtool'u açmanız gerekir, aksi takdirde bir $r is not definedhata alırsınız

1. geliştirici araçlarını aç
2. Tepki sekmesine tıklayın
3. sağlayıcı düğümünün (veya en üstteki düğümün) seçildiğinden emin olun
4. sonra konsolunuza $r.store.getState();veya yazın$r.store.dispatch({type:"MY_ACTION"})

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

Artık mağazaya konsoldaki window.store'dan şu şekilde erişebilirsiniz:

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

Redux Book'ta açıklandığı gibi bir günlük ara yazılımını kullanabilirsiniz :

/**
 * 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)

Alternatif olarak, günlüğü yalnızca bir genel diziye (sizin window._redux) eklenecek şekilde değiştirebilir ve belirli bir durum hakkında bilgiye ihtiyacınız olduğunda diziye bakabilirsiniz.

Önerilen çözüm benim için çalışmıyor.

Doğru komut şudur:

$r.props.store.getState()

Next JS kullanıyorsanız , mağazaya şu şekilde erişebilirsiniz: window.__NEXT_REDUX_STORE__.getState()

Eylemleri de gönderebilirsiniz, sadece içinde sahip olduğunuz seçeneklere bakın.window.__NEXT_REDUX_STORE__

Hata ayıklama için mağaza durumunu görmek isterseniz, şunu yapabilirsiniz:

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

Başka bir yanıt, mağazayı pencereye eklemeyi önerir, ancak mağazaya yalnızca bir nesne olarak erişmek istiyorsanız, pencerede bir alıcı tanımlayabilirsiniz.

Bu kodun mağazanızı yapılandırdığınız yere eklenmesi gerekiyor - benim uygulamamda bu <Provider store={store} />, çağrıldığı dosyayla aynı dosya .

Artık reduxStorebir nesne almak ve copy(reduxStore)onu panoya kopyalamak için konsola yazabilirsiniz .

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

if (process.env.NODE_ENV === 'development')Üretimde devre dışı bırakmak için bunu bir içine sarabilirsiniz .

React geliştirici araçlarıyla:

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

Öncelikle, windownesnede depoyu tanımlamanız gerekir ( configureStoreDosyanıza yerleştirebilirsiniz):

window.store = store;

O zaman konsola yalnızca aşağıdakileri yazmanız gerekir:

window.store.getState();

Umarım bu yardımcı olur.