From 54c7231075623b3260768ce7fcd53b7ba32407aa Mon Sep 17 00:00:00 2001 From: Matthew Nitschke Date: Wed, 18 Jan 2023 11:39:29 -0700 Subject: [PATCH 1/3] added support for named redux dev tool instances --- lib/over_react_redux.dart | 3 ++- .../over_react_redux/devtools/middleware.dart | 21 +++++++++++++++++-- 2 files changed, 21 insertions(+), 3 deletions(-) diff --git a/lib/over_react_redux.dart b/lib/over_react_redux.dart index 2beb6b2b2..b3e6f3d3d 100644 --- a/lib/over_react_redux.dart +++ b/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, ReduxDevToolsExtensionOptions; diff --git a/lib/src/over_react_redux/devtools/middleware.dart b/lib/src/over_react_redux/devtools/middleware.dart index 49e4a1e44..f1f49866a 100644 --- a/lib/src/over_react_redux/devtools/middleware.dart +++ b/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 options]) { 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,20 @@ 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. +/// +/// Example: +/// ``` +/// var store = new DevToolsStore( +/// /*YourReducer*/, +/// initialState: /*YourInitialState*/, +/// middleware: [overReactReduxDevToolsMiddlewareFactory(name: 'My Store')], +/// ); +/// ``` +MiddlewareClass overReactReduxDevToolsMiddlewareFactory({ + String name, +}) => _OverReactReduxDevToolsMiddleware({ + 'name': name, +}); \ No newline at end of file From 63f5a0d12b33bbeaaa51a60a8ac7ddaea1338ce5 Mon Sep 17 00:00:00 2001 From: Matthew Nitschke Date: Wed, 18 Jan 2023 11:55:08 -0700 Subject: [PATCH 2/3] updated example and documentation --- app/over_react_redux/todo_client/lib/src/store.dart | 2 +- doc/over_react_redux_documentation.md | 10 ++++++++++ lib/over_react_redux.dart | 2 +- 3 files changed, 12 insertions(+), 2 deletions(-) diff --git a/app/over_react_redux/todo_client/lib/src/store.dart b/app/over_react_redux/todo_client/lib/src/store.dart index 262595ac5..9274b38f3 100644 --- a/app/over_react_redux/todo_client/lib/src/store.dart +++ b/app/over_react_redux/todo_client/lib/src/store.dart @@ -22,7 +22,7 @@ DevToolsStore getStore() => DevToolsStore( appStateReducer, initialState: initializeState(), middleware: [ - overReactReduxDevToolsMiddleware, + overReactReduxDevToolsMiddlewareFactory(name: 'Example Store'), localStorageMiddleware(), ], ); diff --git a/doc/over_react_redux_documentation.md b/doc/over_react_redux_documentation.md index da81a632b..066c1937e 100644 --- a/doc/over_react_redux_documentation.md +++ b/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( + /*ReducerName*/, + initialState: /*Default App State Object*/, + middleware: [overReactReduxDevToolsMiddlewareFactory(name: 'Some Custom Instance Name')], +) +``` \ No newline at end of file diff --git a/lib/over_react_redux.dart b/lib/over_react_redux.dart index b3e6f3d3d..7dce2b5a7 100644 --- a/lib/over_react_redux.dart +++ b/lib/over_react_redux.dart @@ -19,4 +19,4 @@ export 'src/over_react_redux/hooks/use_dispatch.dart' show createDispatchHook, u 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, overReactReduxDevToolsMiddlewareFactory, ReduxDevToolsExtensionOptions; + show overReactReduxDevToolsMiddleware, overReactReduxDevToolsMiddlewareFactory; From 1643be4c5d10eeb1140c80b6e025fcd8c4c0de5a Mon Sep 17 00:00:00 2001 From: Matthew Nitschke Date: Wed, 18 Jan 2023 13:20:53 -0700 Subject: [PATCH 3/3] addressed pr comments --- lib/src/over_react_redux/devtools/middleware.dart | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/lib/src/over_react_redux/devtools/middleware.dart b/lib/src/over_react_redux/devtools/middleware.dart index f1f49866a..2dcb01140 100644 --- a/lib/src/over_react_redux/devtools/middleware.dart +++ b/lib/src/over_react_redux/devtools/middleware.dart @@ -41,7 +41,7 @@ class _OverReactReduxDevToolsMiddleware extends MiddlewareClass { _ReduxDevToolsExtensionConnection devToolsExt; final Logger log = Logger('OverReactReduxDevToolsMiddleware'); - _OverReactReduxDevToolsMiddleware([Map options]) { + _OverReactReduxDevToolsMiddleware([Map options = const {}]) { var windowConsole = getProperty(window, 'console'); log.onRecord.listen((rec) { // This return is to safeguard against this listener acting like @@ -196,6 +196,11 @@ final MiddlewareClass overReactReduxDevToolsMiddleware = _OverReactReduxDevTools /// 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: /// ``` @@ -208,5 +213,5 @@ final MiddlewareClass overReactReduxDevToolsMiddleware = _OverReactReduxDevTools MiddlewareClass overReactReduxDevToolsMiddlewareFactory({ String name, }) => _OverReactReduxDevToolsMiddleware({ - 'name': name, + if (name != null) 'name': name, }); \ No newline at end of file