angular_redux_dev_tools 0.2.0

Dart 2 incompatible

A Time Traveling Redux Debugger for Angular

angular_redux_dev_tools #

Build Status

An AngularDart component you can use to show a Redux Time Travel UI.

Usage #

Add imports for DevToolsStore and ReduxDevToolsComponent:

import 'package:angular_redux_dev_tools/redux_dev_tools_component.dart';
import 'package:redux_dev_tools/redux_dev_tools.dart';
  • Add ReduxDevToolsComponent to your component's directives
  • Create a <redux-dev-tools> element
  • Bind a DevToolsStore to the store property
@Component(
  selector: 'my-example',
  template: '<redux-dev-tools [store]="store"></redux-dev-tools>',
  directives: const [ReduxDevToolsComponent],
)
class ExampleComponent {
    final DevToolsStore store = new DevToolsStore(exampleReducer);
}

Note: This Widget does not work with a normal Redux Store. It is meant to work with the redux_dev_tools package, which provides a DevToolsStore. The DevToolsStore is a drop-in replacement for your Store during Development!

Demo #

Vanilla counter demo

Vanilla counter demo video

Example #

To launch the examples in your browser:

Credits #

All of this is inspired by the original Redux Devtools. and Flutter Redux Devtools.