angular_redux_dev_tools #

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

Example #

To launch the examples in your browser:

• Run pub serve example from this directory
• Open http://localhost:8080

Credits #

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