react_redurx 0.1.0

React bindings for ReduRx.

React-ReduRx

React bindings for ReduRx.

Usage

import 'dart:html' show querySelector;

import 'package:react/react.dart';
import 'package:react/react_client.dart' show setClientConfiguration;
import 'package:react/react_client/react_interop.dart';
import 'package:react/react_dom.dart' show render;
import 'package:react_redurx/react_redurx.dart';
import 'package:redurx/redurx.dart';

final app = registerComponent(() => App());
final foo = registerComponent(() => Foo());

class State {
  State(this.count);
  final int count;

  @override
  String toString() => '{count: $count}';
}

class Increment implements Action<State> {
  State reduce(State state) => State(state.count + 1);
}

class Foo extends Component {
  @override
  ReactElement render() => div({}, [
        props['value'],
        button({'onClick': (e) => props['increment']()}, '+')
      ]);
}

class App extends Component {
  @override
  ReactElement render() => connect<State>(
        (state) => {'value': state.count},
        (dispatch) => {'increment': () => dispatch(Increment())},
      )(foo);
}

void main() {
  setClientConfiguration();

  final store = Store<State>(State(0));
  final provider = registerComponent(() => Provider<State>(store: store));

  store.stream.listen(print);

  render(provider({}, app({})), querySelector('#root'));
}