react-state-rxjs
  • Introduction
  • Main differences
  • Performance first
  • GETTING STARTED
    • Instalation
    • Examples
  • Core concepts
    • Main idea
      • More complex flow visualization
    • Configuration
    • Store
      • Operators
      • Optimistic updates plugin
      • Form manager plugin
        • ShouldUpdateState hook
        • Custom form elements
      • Persist state plugin
        • Configuring custom storage
    • Actions
      • Immer
      • ImutableJs
      • Async
    • Components with Actions
    • @InjectStore decorator
    • @ComponentState decorator
    • ComponentState Hook
    • Dispatcher
    • Router / History
  • DIFFERENT SCENARIOS
    • Passing list item index via router
  • UNIT TESTING
    • Setup
    • Test store
    • Test actions
    • Test component with actions
    • Test with Enzyme
  • Debugging
    • Setup
    • Redux DevTools
    • Automated changes output
    • Manual state changes check
    • Additional debugging information
  • Production
    • Production mode
  • Other information
    • Best practices
    • CLI
      • Custom Configurations
    • Performance
    • Blog Posts
    • Contributing
Powered by GitBook
On this page

Was this helpful?

  1. Debugging

Setup

PreviousTest with EnzymeNextRedux DevTools

Last updated 6 years ago

Was this helpful?

Debuging is disabled by default and can be invoked via console see more on

Debugger setup

However, often there are cases, when you need to track whole state change history from very start for example initial data load etc. For this case you can enable it on app initialization:

ReactState
    .debugger(true, { enableConsoleOutput: false })
    .init((routerHistory: History) => {
        hydrate(<Main history={routerHistory} />, document.getElementById("example"))
    }, initialState, isProd);

As you can see there are more options:

  • enableConsoleOutput - toggle output changes to console or not

  • enableDevToolsOutput - toggle output changes to Redux DevTools or not

History options

react-state-rxjs keeps 100 latest history items by default. It can be useful when you want to send some logs for further investigation. You can disable or increase stored items by overriding default parameters by invoking changeHistoryDefaultOptions

ReactState
    .changeHistoryDefaultOptions({ collectHistory: false })
    .init((routerHistory: History) => {
        hydrate(<Main history={routerHistory} />, document.getElementById("example"))
    }, initialState, isProd);

it has such options:

  • storeHistoryItems - number of items to store

  • collectHistory - enable or disable history collecting

Automated Changes Output