Make context typing more accurate

Author: EskiMojo14

docs/api/Provider.md

@@ -39,9 +39,10 @@ interface ProviderProps<A extends Action = AnyAction, S = any> {
    * to create a context to be used.
    * If this is used, you'll need to customize `connect` by supplying the same
    * context provided to the Provider.
-   * Initial value doesn't matter, as it is overwritten with the internal state of Provider.
+   * Set the initial value to null, and the hooks will error
+   * if this is not overwritten by Provider.
    */
-  context?: Context<ReactReduxContextValue<S, A>>
+  context?: Context<ReactReduxContextValue<S, A> | null>
 
   /** Global configuration for the `useSelector` stability check */
   stabilityCheck?: StabilityCheck

docs/using-react-redux/accessing-store.md

@@ -27,7 +27,7 @@ Redux store accessible to deeply nested connected components. As of React Redux
 by a single default context object instance generated by `React.createContext()`, called `ReactReduxContext`.
 
 React Redux's `<Provider>` component uses `<ReactReduxContext.Provider>` to put the Redux store and the current store
-state into context, and `connect` uses `<ReactReduxContext.Consumer>` to read those values and handle updates.
+state into context, and `connect` uses `useContext(ReactReduxContext)` to read those values and handle updates.
 
 ## Using the `useStore` Hook
 
@@ -87,8 +87,8 @@ This also provides a natural isolation of the stores as they live in separate co
 
 ```js
 // a naive example
-const ContextA = React.createContext();
-const ContextB = React.createContext();
+const ContextA = React.createContext(null);
+const ContextB = React.createContext(null);
 
 // assuming reducerA and reducerB are proper reducer functions
 const storeA = createStore(reducerA);

src/components/Context.ts

@@ -16,12 +16,14 @@ export interface ReactReduxContextValue<
 }
 
 const ContextKey = Symbol.for(`react-redux-context-${ReactVersion}`)
-const gT = globalThis as { [ContextKey]?: Context<ReactReduxContextValue> }
+const gT = globalThis as {
+  [ContextKey]?: Context<ReactReduxContextValue | null>
+}
 
 function getContext() {
   let realContext = gT[ContextKey]
   if (!realContext) {
-    realContext = createContext<ReactReduxContextValue>(null as any)
+    realContext = createContext<ReactReduxContextValue | null>(null)
     if (process.env.NODE_ENV !== 'production') {
       realContext.displayName = 'ReactRedux'
     }
@@ -31,8 +33,8 @@ function getContext() {
 }
 
 export const ReactReduxContext = /*#__PURE__*/ new Proxy(
-  {} as Context<ReactReduxContextValue>,
-  /*#__PURE__*/ new Proxy<ProxyHandler<Context<ReactReduxContextValue>>>(
+  {} as Context<ReactReduxContextValue | null>,
+  /*#__PURE__*/ new Proxy<ProxyHandler<Context<ReactReduxContextValue | null>>>(
     {},
     {
       get(_, handler) {

src/components/Provider.tsx

@@ -21,9 +21,10 @@ export interface ProviderProps<A extends Action = AnyAction, S = unknown> {
   /**
    * Optional context to be used internally in react-redux. Use React.createContext() to create a context to be used.
    * If this is used, you'll need to customize `connect` by supplying the same context provided to the Provider.
-   * Initial value doesn't matter, as it is overwritten with the internal state of Provider.
+   * Set the initial value to null, and the hooks will error
+   * if this is not overwritten by Provider.
    */
-  context?: Context<ReactReduxContextValue<S, A>>
+  context?: Context<ReactReduxContextValue<S, A> | null>
 
   /** Global configuration for the `useSelector` stability check */
   stabilityCheck?: CheckFrequency

src/components/connect.tsx

@@ -584,7 +584,7 @@ function connect<
         : contextValue!.store
 
       const getServerState = didStoreComeFromContext
-        ? contextValue.getServerState
+        ? contextValue!.getServerState
         : store.getState
 
       const childPropsSelector = useMemo(() => {

src/hooks/useDispatch.ts

@@ -15,7 +15,7 @@ export function createDispatchHook<
   S = unknown,
   A extends Action = AnyAction
   // @ts-ignore
->(context?: Context<ReactReduxContextValue<S, A>> = ReactReduxContext) {
+>(context?: Context<ReactReduxContextValue<S, A> | null> = ReactReduxContext) {
   const useStore =
     // @ts-ignore
     context === ReactReduxContext ? useDefaultStore : createStoreHook(context)

src/hooks/useReduxContext.ts

@@ -10,7 +10,7 @@ import type { ReactReduxContextValue } from '../components/Context'
  * @returns {Function} A `useReduxContext` hook bound to the specified context.
  */
 export function createReduxContextHook(context = ReactReduxContext) {
-  return function useReduxContext(): ReactReduxContextValue | null {
+  return function useReduxContext(): ReactReduxContextValue {
     const contextValue = useContext(context)
 
     if (process.env.NODE_ENV !== 'production' && !contextValue) {
@@ -19,7 +19,7 @@ export function createReduxContextHook(context = ReactReduxContext) {
       )
     }
 
-    return contextValue
+    return contextValue!
   }
 }
 

src/hooks/useSelector.ts

@@ -80,7 +80,7 @@ export function createSelectorHook(context = ReactReduxContext): UseSelector {
       getServerState,
       stabilityCheck: globalStabilityCheck,
       noopCheck: globalNoopCheck,
-    } = useReduxContext()!
+    } = useReduxContext()
 
     const firstRun = useRef(true)
 

src/hooks/useStore.ts

@@ -17,7 +17,7 @@ export function createStoreHook<
   S = unknown,
   A extends BasicAction = AnyAction
   // @ts-ignore
->(context?: Context<ReactReduxContextValue<S, A>> = ReactReduxContext) {
+>(context?: Context<ReactReduxContextValue<S, A> | null> = ReactReduxContext) {
   const useReduxContext =
     // @ts-ignore
     context === ReactReduxContext
@@ -29,7 +29,7 @@ export function createStoreHook<
     Action extends BasicAction = A
     // @ts-ignore
   >() {
-    const { store } = useReduxContext()!
+    const { store } = useReduxContext()
     // @ts-ignore
     return store as Store<State, Action>
   }

test/components/connect.spec.tsx

@@ -2130,9 +2130,10 @@ describe('React', () => {
           }
         }
 
-        const context = React.createContext<
-          ReactReduxContextValue<any, AnyAction>
-        >(null as any)
+        const context = React.createContext<ReactReduxContextValue<
+          any,
+          AnyAction
+        > | null>(null)
 
         let actualState
 
@@ -2171,9 +2172,10 @@ describe('React', () => {
           }
         }
 
-        const context = React.createContext<
-          ReactReduxContextValue<any, AnyAction>
-        >(null as any)
+        const context = React.createContext<ReactReduxContextValue<
+          any,
+          AnyAction
+        > | null>(null)
 
         let actualState
 
@@ -2425,9 +2427,8 @@ describe('React', () => {
           (state: RootStateType = 0, action: ActionType) =>
             action.type === 'INC' ? state + 1 : state
         )
-        const customContext = React.createContext<ReactReduxContextValue>(
-          null as any
-        )
+        const customContext =
+          React.createContext<ReactReduxContextValue | null>(null)
 
         class A extends Component {
           render() {