[feature-request] Expose custom context to hooks

What is the current behavior?

The Provider component allows consumers to pass a custom context, but the current hooks API does not allow that custom context to be used.

What is the expected behavior?

I’d like to be able to access a custom context via React Redux hooks. I’d expect this would be implemented with a “hook factory” pattern for performance reasons, but that’s an implementation detail.

Which versions of React, ReactDOM/React Native, Redux, and React Redux are you using? Which browser and OS are affected by this issue? Did this work in previous versions of React Redux?

This issue is unique to the v7-hooks branch. I suppose you could say this has never worked in previous versions of React Redux, since hook support is new 🙂or, it might be argued that the HOC pattern was able to access alternate contexts, so hook support would be incomplete without it.

Note: I have a PR prepared; I didn’t read the contributing guidelines until after I’d written the code, which is why I’m doubling back and creating the discussion issue now.

[ryaninvents]

Good point! I was trying to avoid making assumptions about the consumer’s application, but ended up assuming all use cases would look like mine instead. 😅

I’ll put up a PR within the next few days using the create* API you’ve proposed.

[ryaninvents]

I’ve got a branch with the following as a proposal:

createCustomHooks()

This utility function returns a set of hooks bound to a different context. You might use this to help manage a very complex reusable component, allowing it to coexist within a Redux application using its own store instance without colliding.

import React from 'react'
import { createCustomHooks, Provider } from 'react-redux'
import createComponentStore, { increment } from './component-store'

const customContext = React.createContext()
const customStore = createComponentStore()

const customHooks = createCustomHooks(customContext)

const Increment = () => {
  const dispatch = customHooks.useDispatch()
  return (
    <button onClick={() => dispatch(increment())}>+1</button>
  )
}

const InternalCount = () => {
  const count = customHooks.useSelector(s => s.count)
  return (
    <span>{String(count)}</span>
  )
}

export const ReusableCounterComponent = ({ children }) => {
  return (
    <Provider context={customContext} store={customStore}>
      <div>
        <Increment /> <InternalCount />
        {children}
      </div>
    </Provider>
  )
}

Note that consumers of your component will want any children to use the top-level application Store, not your Store. By creating a separate context, you will permit nested components to work as expected, instead of attaching to your component’s store.

createContextValue

This utility function allows you to use a singleton instance of your Redux store. This is useful in cases where your component will be reusable, but you want all instances to share the same store. For instance, this would be a great way to implement caching without requiring consumers of the component to wrap their application in a top-level <Provider>.

Note that if you create a context using this utility, you will only be able to access it through hooks created with createCustomHooks.

import { createCustomHooks, createContextValue } from 'react-redux'
import store from './store'

const customContext = React.createContext(createContextValue(store))
const customHooks = createCustomHooks(() => React.useContext(customContext))

export const Increment = () => {
  const dispatch = customHooks.useDispatch()
  return (
    <button onClick={() => dispatch(increment())}>+1</button>
  )
}

This is just one way we could expose it; my proposal branch is mostly clean code but there’s still room for improvement.

The key pieces are Subscription and useSelectorWithStoreAndSubscription (factored out from useSelector), so even if the only outcome of this request were to expose those two as exports, it would still permit custom contexts.