Merge pull request #797 from Workiva/named_redux_dev_tools_instances

FEA-1258: Named redux devtools instances

app/over_react_redux/todo_client/lib/src/store.dart

@@ -22,7 +22,7 @@ DevToolsStore<AppState> getStore() => DevToolsStore<AppState>(
   appStateReducer,
   initialState: initializeState(),
   middleware: [
-    overReactReduxDevToolsMiddleware,
+    overReactReduxDevToolsMiddlewareFactory(name: 'Example Store'),
     localStorageMiddleware(),
   ],
 );

doc/over_react_redux_documentation.md

@@ -648,3 +648,13 @@ Redux DevTools can be set up easily by adding only a few lines of code.
    - Firefox: https://addons.mozilla.org/en-US/firefox/addon/reduxdevtools/
 
 You can run your code and open the devtools in your browser!
+
+`overReactReduxDevToolsMiddlewareFactory` is also available to pass [options](https://github.com/reduxjs/redux-devtools/blob/main/extension/docs/API/Arguments.md) into the initialization of the redux dev tools.
+
+```dart
+var store = new DevToolsStore<AppState>(
+  /*ReducerName*/,
+  initialState: /*Default App State Object*/,
+  middleware: [overReactReduxDevToolsMiddlewareFactory(name: 'Some Custom Instance Name')],
+)
+```

lib/over_react_redux.dart

@@ -18,4 +18,5 @@ export 'src/over_react_redux/over_react_redux.dart';
 export 'src/over_react_redux/hooks/use_dispatch.dart' show createDispatchHook, useDispatch;
 export 'src/over_react_redux/hooks/use_selector.dart' show createSelectorHook, useSelector;
 export 'src/over_react_redux/hooks/use_store.dart' show createStoreHook, useStore;
-export 'src/over_react_redux/devtools/middleware.dart' show overReactReduxDevToolsMiddleware;
+export 'src/over_react_redux/devtools/middleware.dart' 
+  show overReactReduxDevToolsMiddleware, overReactReduxDevToolsMiddlewareFactory;

lib/src/over_react_redux/devtools/middleware.dart

@@ -41,7 +41,7 @@ class _OverReactReduxDevToolsMiddleware extends MiddlewareClass {
   _ReduxDevToolsExtensionConnection devToolsExt;
   final Logger log = Logger('OverReactReduxDevToolsMiddleware');
 
-  _OverReactReduxDevToolsMiddleware() {
+  _OverReactReduxDevToolsMiddleware([Map<String, dynamic> options = const {}]) {
     var windowConsole = getProperty(window, 'console');
     log.onRecord.listen((rec) {
       // This return is to safeguard against this listener acting like
@@ -54,7 +54,7 @@ class _OverReactReduxDevToolsMiddleware extends MiddlewareClass {
       }
     });
     try {
-      devToolsExt = reduxExtConnect();
+      devToolsExt = reduxExtConnect(jsify(options));
       devToolsExt.subscribe(allowInterop(handleEventFromRemote));
     } catch (e) {
       log.warning(e);
@@ -193,3 +193,25 @@ class _OverReactReduxDevToolsMiddleware extends MiddlewareClass {
 /// );
 /// ```
 final MiddlewareClass overReactReduxDevToolsMiddleware = _OverReactReduxDevToolsMiddleware();
+
+/// A Middleware that can be added to a [DevToolsStore] in order to utilize the Redux DevTools browser extension.
+/// Similar to [overReactReduxDevToolsMiddleware], but allows passing of options to initialize dev tools with.
+/// 
+/// Arguments:
+/// - [name] - the instance name to be shown on the monitor page. Default value is `document.title`. 
+///   If not specified and there's no document title, it will consist of tabId and instanceId. 
+///   Use this if your page has multiple stores.
+///
+/// Example:
+/// ```
+/// var store = new DevToolsStore<AppState>(
+///   /*YourReducer*/,
+///   initialState: /*YourInitialState*/,
+///   middleware: [overReactReduxDevToolsMiddlewareFactory(name: 'My Store')],
+/// );
+/// ```
+MiddlewareClass overReactReduxDevToolsMiddlewareFactory({
+  String name,
+}) => _OverReactReduxDevToolsMiddleware({
+  if (name != null) 'name': name,
+});