Multiple stores without providers

[mikeduminy]

Background

We have a large app that didn't scale well with a single store (both in process and performance). We found that teams would be able to read directly from the slice of another team's store, which led to many headaches. Thus we decided to implement entirely separate stores that would operate as each feature's database, much like microservices have their own databases.

The challenge? We wanted to lazily load these stores to keep the initial load fast. But doing this the traditional way would have us detecting that a new store has been loaded and wrapping the app root or each screen in a new provider for that store. We weren't satisfied with doing this dynamically at the root as it would cause the whole app to be rerendered, nor did we want to wrap each screen because that wouldn't scale if you wanted to consume data from another feature inside your feature's screens.

Goal

A world where you can access any store in the react lifecycle without the need to wrap anything with providers.

featureA/store.ts

const { useSelector } = createCustomReduxStore(reducer)

export const useSomeData() => useSelector(state => state.some.data)

featureB/screen.ts

import { useSomeData } from 'featureA/store'

export const Screen = () => {
  // NOTE: this call does not need to be nested under ANY provider
  const someData = useSomeData()
  
  return <Screen data={someData} />
}

Solution

The solution was pretty simple, but probably has side-effects that are worth discussing. We wrapped the store creation process, creating a custom context with a modified subscription, allowing us to bypass any provider wrapping.

createReduxContext.ts

import { createSubscription } from 'react-redux/lib/utils/Subscription'

export function createReduxContext(store) {
  const subscription = createSubscription(store)

  subscription.onStateChange = subscription.notifyNestedSubs // <--- this is all that's needed

  const contextValue = {
    store,
    subscription,
  }

  return React.createContext(contextValue)
}

Finally, we use this in our custom store creator.

createCustomStore.ts

export function createCustomReduxStore(reducer) {
  const store = createStore()

  const context = createReduxContext(store)
  const useDispatch = createDispatchHook(context)
  const useSelector = createSelectorHook(context)

   return {
      store,
      useDispatch,
      useSelector,
    }
}

Discussion

This has been working for us for years on react-redux 7. Upon upgrading to react-redux 9 we found that we couldn't do this anymore, mostly because createSubscription is not exported and deep imports aren't available. We found a work-around, but I'd prefer that createSubscription be officially exported to facilitate this more unique use-case.

Please share any thoughts you may have on this solution and suggestion 🙏

[markerikson]

Heh, timing of this post is bad on my side - I'm at React Summit this week, then continuing to travel for a couple more weeks, and right now I'm jet lagged and about to crash :)

Realistically this post is going to fall off my radar because I have too much else going on and this isn't a problem my brain is thinking about. Could you ping me at the start of July as a reminder, and I can try to think about it then?

[mikeduminy]

Absolutely, I'll set a reminder :) Enjoy the conference!