Redux-devtools-extension: More unique global variable name than `devToolsExtension`

[sompylasar]

The chosen global variable name devToolsExtension in the shared window namespace is too vague and may easily conflict with other browser extensions.

I suggest to make it explicit and rename it to reduxDevToolsBrowserExtension.

Yes, this would be a breaking change, but the change will be future-proof and fix the initial name choosing error.

[zalmoxisus]

Thanks for the suggestion. Do you have a specific issue with any other browser extensions using this name?

See also my proposal of renaming it.

There are two issues with reduxDevToolsBrowserExtension:

1. It's too long when using the API (like window.reduxDevToolsBrowserExtension.send).
2. The extension is not intended to be used only for Redux. However, renaming to just reduxExtension could be an option.

[sompylasar]

@zalmoxisus No, I haven't got any issues, though I prefer to keep unique naming when I have to put something into the global, shared namespace, regardless of the current conflicts, to make future-proof solutions. Especially if that global namespace is polluted by a third-party library where there is no control over what is injected.

1. It's too long when using the API (like window.reduxDevToolsBrowserExtension.send).

It's never too long when you put it into a global, shared namespace. In an app (local) context you can make an alias to the API like this:

// in a redux app where devTools is supposed to be the redux devTools:
const devToolsExt = window.reduxDevToolsBrowserExtension;
devToolsExt.send

but in an app where there would be several devTools, not just for redux, you might want to do:

// in an app where there are several devTools, not just redux:
const reactDevToolsExtension = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
// do something with reactDevToolsExtension

const reduxDevToolsExtension = window.reduxDevToolsBrowserExtension;
reduxDevToolsExtension.send(...)

React DevTools uses __REACT_DEVTOOLS_GLOBAL_HOOK__ as the global name, and it's not too long for them, given it's in a global namespace. https://github.com/facebook/react-devtools#the-react-tab-doesnt-show-up

Probably, a better name would be an explicit super-global-style name, like __REDUX_DEVTOOLS_EXTENSION__.

1. The extension is not intended to be used only for Redux. However, renaming to just reduxExtension could be an option.

It still operates on redux _concepts_ of state and action, even not directly bound to the redux _library_.

[zalmoxisus]

React DevTools uses __REACT_DEVTOOLS_GLOBAL_HOOK__ as the global name, and it's not too long for them

The difference is that you never use this name explicitly.

I agree on renaming, but I prefer names that can be typed, not to copy paste it every time you want to call a method. I understand that you're using only the store enhancer, and it's not a problem in your specific case (as you will add it just once).

const devToolsExt = window.reduxDevToolsBrowserExtension;
devToolsExt.send

Yes, we're using it in this way

const devToolsExt = window.devToolsExtension.connect(options);
devToolsExt.send(payload);

or

const store = window.devToolsExtension(options);
store.dispatch(action, state);

But for long names you have to copy paste that in every module / component / saga ...

[zalmoxisus]

In case we'll go with __REDUX_DEVTOOLS_EXTENSION__, it would require to have an npm package to substitute this name, like:

import devToolsExt from 'devToolsExt';

let store = createStore(reducer, initialState, compose(
    applyMiddleware(...middleware),
    devToolsExt()
  ));

So generally the module will contain:

export default function extensionEnhancer(options) {
  return typeof window === 'object' &&
    typeof window.__REDUX_DEVTOOLS_EXTENSION__ !== 'undefined' ?
    window.__REDUX_DEVTOOLS_EXTENSION__(options) : f => f
}

And also export the API.

[sompylasar]

So generally the module will contain:

Right, that would be awesome.

[sompylasar]

import devToolsExt from 'redux-devtools-extension-bridge';

[zalmoxisus]

It could be just import devToolsExt from 'redux-devtools-extension'. Just published to npm an alpha release to reserve the name. 😏

[zalmoxisus]

Implemented. Closing in favour of #220.