Some way to use a custom compose function with configureStore

[matt-oakes]

Hello,

Firstly, thanks for all your work on Redux Toolkit. It makes setting up Redux much easier, especially with slices.

Issue

I am working on adding support for a custom version of the Redux DevTools for Expo/React Native using their dev plugin system. I have already created a first version of this and it's working well.

Hooking it up to Redux is very similar to @redux-devtools/remote where is requires you to add a new enhancer. The catch though, is that as with DevTools remote, if you have other enhancers or middleware then it requires you to wrap those in a composeWithDevTools.

For standard Redux using createStore, this works fine.

The issue is that Toolkits configureStore does not currently have a way to do this, so your only option is to manually configure everything using createStore, which isn't a great solution.

Solution

My idea for a solution is to allow you to pass in a new compose property. This will be used in place of Redux's compose function and would allow users to pass in the composeWithDevTools from my library (different from the standard Redux DevTools one).

One issue that we might have is that finalCompose is changed based on the devTools property. As this isn't desireable, what I propose is that you need to explicitly set devTools: false to be able to supply a compose property.

For example, this would be invalid and throw an error/warning (due to devTools: true being the default):

const store = configureStore({
  reducer: {},
  compose: composeWithExpoDevTools,
});

wheras this would be valid:

const store = configureStore({
  reducer: {},
  devTools: false,
  compose: composeWithExpoDevTools,
});

Changes needed

1. Add a new compose property to ConfigureStoreOptions
2. Handle this inside configureStore
3. Document the changes in the API and maybe in the usage guide (might not be needed as it's a very advanced and uncommon option that's being added)

I would be happy to make these changes as they don't seem too big, but I wanted to get the go ahead that this solution is something you would be happy with before starting on it.

Let me know if you have any questions or comments.

[markerikson]

Ultimately all that composeWithDevTools is doing is adding the global DevTools Extension enhancer at the end of the list.

Pretty sure you should be able to do something like:

configureStore({
  reducer, 
  devTools: false, 
  enhancers: (getDefaultEnhancers) => {
    return getDefaultEnhancers().concat(yourSpecialEnhancerHere)
  }
})

Does that work?

[matt-oakes]

I’m on my phone right now so I can’t quite decipher what exactly it does, but I believe it adds a “preEnhancer” before the others and the main enhancer after:

https://github.com/reduxjs/redux-devtools/blob/c8cf8476810d5a3f17ce5aca246dfe26c3c4e686/packages/redux-devtools-remote/src/devTools.ts#L584

I was under the impression that if you just add it to the end of the list it will miss actions that are dispatched by enhancers like Redux Sagas, which is why DevTools remote says you need to use the compose functions.

[markerikson]

I really don't want to change the configureStore signature or options for this one specific case.

If anything, it seems like a better option would be to update the @redux-devtools/remote package to export those enhancers separately.

That said, I'm also confused by your last statement. redux-saga is a middleware, not an enhancer, and the applyMiddleware enhancer would go before any devtools enhancer.

Hmm. Looking at that snippet of code, all the "pre-enhancer" is actually doing is skipping passing the dispatch along if the devtool is set to "locked". That seems like it's irrelevant / unnecessary for the general use case of seeing actions that were dispatched.

[matt-oakes]

Thanks for looking into this. I completely understand not wanting to change the options just for this use case.

I’ve only just started looking into this code, so il not too certain what it does or why. It might be that some of it is needed because the enhancer doesn’t just view the state but also dispatch and rewind state.

Your idea about exporting a pre and post enhancer might be a good idea though. I might look into that route as it would work with Redux Toolkit as it is now. I’ll let you know how that goes and if it’s workable.

[markerikson]

Based on that code snippet above, I'm 90% certain you only need the DevToolsEnhancer instance (although that class does not appear to be actually exported from the file, which is easily fixable).

[theogravity]

I tested @markerikson suggestion and it does work. See this discussion:

reduxjs/redux-devtools#1533