Merge pull request #7 from davidmarne/stateChange

State Change Handler

Author: davidmarne

README.md

@@ -4,6 +4,7 @@
 ### built_redux
 
 built_redux is a state management library written in dart that enforces immutability.
+built_redux stores can be built with middleware and nested reducers
 
 Inspired by [redux][redux_git]
 
@@ -26,7 +27,7 @@ Built using [built_value][built_value_git]
       built_redux: "^0.1.0"
     ```
 
-2. Create a script to run generators for generating built_values and redux actions.
+2. Create a script to run generators for generating built_values and additional built_redux classes.
     ```
     import 'dart:async';
 
@@ -122,7 +123,7 @@ var store = new Store<Counter, CounterBuilder, CounterActions>(
 // Normally you'd use a view binding library (e.g. React Redux) rather than subscribe() directly.
 // However it can also be handy to persist the current state in the localStorage.
 
-store.subscribe(() =>
+store.subscribe((_) =>
   print(store.state);
 )
 
@@ -204,6 +205,29 @@ store.actions.decrement(1);
 // 4
 ```
 
+Nested reducers can be added to your BuiltReducer. In this example NestedCounter
+is another BuiltReducer. In order for nested reducers to work you must mix in
+{Built reducer name}ReduceChildren just like BaseCounterReduceChildren is below.
+This class will be generated for you by the BuiltReduxGenerator.
+```
+abstract class BaseCounter extends BuiltReducer<BaseCounter, BaseCounterBuilder>
+    with BaseCounterReduceChildren
+    implements Built<BaseCounter, BaseCounterBuilder> {
+  int get count;
+
+  NestedCounter get nestedCounter;
+
+  get reducer => _baseReducer;
+
+  // Built value boilerplate
+  BaseCounter._();
+  factory BaseCounter([updates(BaseCounterBuilder b)]) =>
+      new _$BaseCounter((BaseCounterBuilder b) => b
+        ..count = 1
+        ..nestedCounter = new NestedCounter().toBuilder());
+}
+```
+
 [built_value_blog]: https://medium.com/dartlang/darts-built-value-for-immutable-object-models-83e2497922d4
 
 [built_value_git]: https://github.com/google/built_value.dart/

example/lib/react_example/module.dart

@@ -1,6 +1,7 @@
 library module;
 
 import 'package:recompose_dart/recompose_dart.dart';
+import 'package:react_built_redux/react_built_redux.dart';
 import 'package:over_react/over_react.dart';
 import 'package:built_value/built_value.dart';
 import 'package:built_collection/built_collection.dart';
@@ -28,14 +29,14 @@ abstract class TodoProps implements Built<TodoProps, TodoPropsBuilder> {
   factory TodoProps([updates(TodoPropsBuilder b)]) = _$TodoProps;
 }
 
-var todosReduxBuilder = compose<ReduxProps<AppState, AppStateBuilder, AppStateActions>, TodoProps>([
-  mapReduxStoreToProps<AppState, TodoProps>(
-      (ReduxProps<AppState, AppStateBuilder, AppStateActions> reduxProps) =>
+var todosReduxBuilder = compose<dynamic, TodoProps>([
+  mapStoreToProps<AppState, AppStateBuilder, AppStateActions, dynamic, TodoProps>(
+      (Store<AppState, AppStateBuilder, AppStateActions> store, dynamic _) =>
           new TodoProps((TodoPropsBuilder b) => b
-            ..actions = reduxProps.store.actions
-            ..currentGroup = reduxProps.store.state.groups.currentGroup?.toBuilder()
-            ..groups.addAll(reduxProps.store.state.groups.groupMap.asMap())
-            ..todos.addAll(reduxProps.store.state.currentGroupTodos.asMap())
+            ..actions = store.actions
+            ..currentGroup = store.state.groups.currentGroup?.toBuilder()
+            ..groups.addAll(store.state.groups.groupMap.asMap())
+            ..todos.addAll(store.state.currentGroupTodos.asMap())
             ..title = "redux")),
   pure,
   lifecycle<TodoProps>(

example/lib/reducers/app_state.dart

@@ -9,7 +9,6 @@ import 'todos.dart';
 import 'todo.dart';
 import 'utils.dart';
 import '../middleware/creation_middleware.dart';
-import 'package:built_value/serializer.dart';
 
 part 'app_state.g.dart';
 

example/pubspec.lock

@@ -66,7 +66,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "0.1.0"
+    version: "0.1.1"
   built_value:
     description:
       name: built_value
@@ -126,7 +126,7 @@ packages:
       name: dart_style
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.0.3"
+    version: "1.0.4"
   glob:
     description:
       name: glob
@@ -249,15 +249,22 @@ packages:
     version: "0.24.0"
   react:
     description:
-      name: react
-      url: "https://pub.dartlang.org"
-    source: hosted
+      ref: context
+      resolved-ref: a5af894a95356ca6d7baf08aa0772d2628ecf5ca
+      url: "git://github.com/greglittlefield-wf/react-dart.git"
+    source: git
     version: "3.2.1"
+  react_built_redux:
+    description:
+      path: "../../react_built_redux"
+      relative: true
+    source: path
+    version: "0.0.0"
   recompose_dart:
     description:
-      name: recompose_dart
-      url: "https://pub.dartlang.org"
-    source: hosted
+      path: "../../recompose_dart"
+      relative: true
+    source: path
     version: "0.0.8"
   shelf:
     description:

example/pubspec.yaml

@@ -2,7 +2,6 @@ name: example
 
 dependencies:
   recompose_dart: '^0.0.5'
-  built_redux: '^0.0.1'
 
 dev_dependencies:
   browser: any
@@ -15,6 +14,15 @@ dev_dependencies:
 dependency_overrides:
   built_redux:
     path: ../.
+  recompose_dart:
+    path: ../../recompose_dart/
+  react_built_redux:
+    path: ../../react_built_redux/
+  react:
+    git:
+      url: git://github.com/greglittlefield-wf/react-dart.git
+      ref: context
+
 
 transformers:
   - $dart2js

example/web/index.dart

@@ -6,6 +6,7 @@ import 'dart:html';
 import 'package:react/react_client.dart' as react_client;
 import 'package:react/react_dom.dart' as react_dom;
 import 'package:built_redux/built_redux.dart';
+import 'package:react_built_redux/react_built_redux.dart';
 import 'package:recompose_dart/recompose_dart.dart';
 
 import 'package:example/example.dart';
@@ -19,8 +20,13 @@ Future main() async {
     middleware: [creatorMiddeware],
   );
 
+  ReactElement base = todosReduxBuilder(null);
+  print(base);
+
   react_dom.render(
-    todosReduxBuilder(new ReduxProps(reduxStore)),
+    (Provider()..store = reduxStore)(
+      todosReduxBuilder(null),
+    ),
     querySelector('#container'),
   );
 }

lib/built_redux.dart

@@ -4,4 +4,5 @@ export 'src/action.dart';
 export 'src/built_reducer.dart';
 export 'src/middleware.dart';
 export 'src/store.dart';
+export 'src/store_change.dart';
 export 'src/typedefs.dart';

lib/src/store.dart

@@ -7,15 +7,18 @@ import 'action.dart';
 import 'built_reducer.dart';
 import 'middleware.dart';
 import 'typedefs.dart';
+import 'store_change.dart';
 
-/// [Store] is the container of your state.
+/// [Store] is the container of your state. It listens for actions, invokes reducers,
+/// and publishes changes to the state
 class Store<State extends BuiltReducer<State, StateBuilder>,
     StateBuilder extends Builder<State, StateBuilder>, Actions extends ReduxActions> {
   // stream used for dispatching actions
   final StreamController<Action<dynamic>> _dispatch = new StreamController.broadcast();
 
   // stream used to dispatch changes to the state
-  final StreamController<State> _stateController = new StreamController.broadcast();
+  final StreamController<StoreChange<State, StateBuilder, dynamic>> _stateController =
+      new StreamController.broadcast();
 
   // the current state
   State _state;
@@ -41,8 +44,8 @@ class Store<State extends BuiltReducer<State, StateBuilder>,
       if (_state == state) return;
 
       // update the internal state and publish the change
+      _stateController.add(new StoreChange<State, StateBuilder, dynamic>(state, _state, action));
       _state = state;
-      _stateController.add(_state);
     };
 
     // if middleware is give build the chain
@@ -70,7 +73,7 @@ class Store<State extends BuiltReducer<State, StateBuilder>,
   }
 
   /// [subscribe] returns a stream that will be dispatched whenever the state changes
-  Stream<State> get subscribe => _stateController.stream;
+  Stream<StoreChange<State, StateBuilder, dynamic>> get subscribe => _stateController.stream;
 
   /// [state] returns the current state
   State get state => _state;

lib/src/store_change.dart

@@ -0,0 +1,53 @@
+import 'dart:async';
+
+import 'package:built_value/built_value.dart';
+
+import 'action.dart';
+import 'built_reducer.dart';
+import 'store.dart';
+
+/// [StoreChange] is the payload for the [Store] subscription
+class StoreChange<State extends BuiltReducer<State, StateBuilder>,
+    StateBuilder extends Builder<State, StateBuilder>, P> {
+  final State next;
+  final State prev;
+  final Action<P> action;
+
+  StoreChange(State n, State p, Action<P> a)
+      : next = n,
+        prev = p,
+        action = a;
+}
+
+/// [StoreChangeHandler] handles a change the store after an action of type Action<T>
+typedef StoreChangeHandler<P, State extends BuiltReducer<State, StateBuilder>,
+    StateBuilder extends Builder<State, StateBuilder>>(
+  StoreChange<State, StateBuilder, P> storeChange,
+);
+
+/// [StoreChangeHandlerBuilder] allows you to listen to the [Store] and perform a handler for a given
+/// set of actions with many different payload types, while maintaining type safety.
+/// Each [StoreChangeHandler] added with add<T> must take a [StoreChange] with prev and next of type
+/// <State, StateBuilder> an Action of typ Action<T>,
+class StoreChangeHandlerBuilder<State extends BuiltReducer<State, StateBuilder>,
+    StateBuilder extends Builder<State, StateBuilder>, Actions extends ReduxActions> {
+  final _map = new Map<String, StoreChangeHandler<dynamic, State, StateBuilder>>();
+  StreamSubscription<StoreChange<State, StateBuilder, dynamic>> _subscription;
+
+  void add<Payload>(
+      ActionName<Payload> aName, StoreChangeHandler<Payload, State, StateBuilder> reducer) {
+    _map[aName.name] = reducer;
+  }
+
+  build(Store<State, StateBuilder, Actions> store) {
+    // TODO: dispose this sub
+    _subscription = store.subscribe.listen((StoreChange<State, StateBuilder, dynamic> storeChange) {
+      var handler = _map[storeChange.action.name];
+      if (handler != null) handler(storeChange);
+    });
+  }
+
+  dispose() {
+    _subscription.cancel();
+  }
+}

pubspec.yaml

@@ -1,5 +1,5 @@
 name: built_redux
-version: 0.1.1
+version: 0.1.2
 description:
   A state management library written in dart that enforces immutability
 authors: