Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

FEA-1258: Named redux devtools instances #797

Merged
merged 3 commits into from
Jan 18, 2023
Merged

FEA-1258: Named redux devtools instances #797

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
54c7231
added support for named redux dev tool instances
matthewnitschke-wk Jan 18, 2023
63f5a0d
updated example and documentation
matthewnitschke-wk Jan 18, 2023
1643be4
addressed pr comments
matthewnitschke-wk Jan 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/over_react_redux/todo_client/lib/src/store.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ DevToolsStore<AppState> getStore() => DevToolsStore<AppState>(
appStateReducer,
initialState: initializeState(),
middleware: [
overReactReduxDevToolsMiddleware,
overReactReduxDevToolsMiddlewareFactory(name: 'Example Store'),
localStorageMiddleware(),
],
);
Expand Down
10 changes: 10 additions & 0 deletions doc/over_react_redux_documentation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')],
)
```
3 changes: 2 additions & 1 deletion lib/over_react_redux.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
26 changes: 24 additions & 2 deletions lib/src/over_react_redux/devtools/middleware.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -54,7 +54,7 @@ class _OverReactReduxDevToolsMiddleware extends MiddlewareClass {
}
});
try {
devToolsExt = reduxExtConnect();
devToolsExt = reduxExtConnect(jsify(options));
devToolsExt.subscribe(allowInterop(handleEventFromRemote));
} catch (e) {
log.warning(e);
Expand Down Expand Up @@ -193,3 +193,25 @@ class _OverReactReduxDevToolsMiddleware extends MiddlewareClass {
/// );
/// ```
final MiddlewareClass overReactReduxDevToolsMiddleware = _OverReactReduxDevToolsMiddleware();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I almost wonder if we should deprecate this in favor of overReactReduxDevToolsMiddlewareFactory, to encourage people to add names. Thoughts?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe eventually

Technically this approach of a middleware factory is not the method that the official redux-devtools uses. Their implementation looks a bit more like:

const composeEnhancers = composeWithDevTools(options);
const store = createStore(
  reducer,
  /* preloadedState, */ composeEnhancers(
    applyMiddleware(...middleware)
    // other store enhancers if any
  )
);

I wasn't sure of the core reasoning behind this, so I felt a bit more comfortable "trying this out" for a bit before we consider it the de-facto way to initialize a dev tools middleware.

If you don't think that's necessary, I'm happy to deprecate and encourage the factory approach

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's fine by me 👍


/// 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.
///
greglittlefield-wf marked this conversation as resolved.
Show resolved Hide resolved
/// Example:
/// ```
/// var store = new DevToolsStore<AppState>(
/// /*YourReducer*/,
/// initialState: /*YourInitialState*/,
/// middleware: [overReactReduxDevToolsMiddlewareFactory(name: 'My Store')],
/// );
/// ```
MiddlewareClass overReactReduxDevToolsMiddlewareFactory({
String name,
}) => _OverReactReduxDevToolsMiddleware({
if (name != null) 'name': name,
});