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 2beb6b2b2..7dce2b5a7 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; diff --git a/lib/src/over_react_redux/devtools/middleware.dart b/lib/src/over_react_redux/devtools/middleware.dart index 49e4a1e44..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() { + _OverReactReduxDevToolsMiddleware([Map 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( +/// /*YourReducer*/, +/// initialState: /*YourInitialState*/, +/// middleware: [overReactReduxDevToolsMiddlewareFactory(name: 'My Store')], +/// ); +/// ``` +MiddlewareClass overReactReduxDevToolsMiddlewareFactory({ + String name, +}) => _OverReactReduxDevToolsMiddleware({ + if (name != null) 'name': name, +}); \ No newline at end of file