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.

Libraries

angular_redux_dev_tools
computed_state_component
computed_state_selection_options
redux_dev_tools_component