Custom context in documents has a error in typescript

export const DirectoryContext = React.createContext(null);
export const useDirectoryStore = createStoreHook(DirectoryContext);
export const useDirectoryDispatch = createDispatchHook(DirectoryContext);
export const useDirectorySelector = createSelectorHook(DirectoryContext);

createStoreHook(DirectoryContext) has an error:

Argument of type 'Context<null>' is not assignable to parameter of type 'Context<ReactReduxContextValue<any, AnyAction>>'.
  The types of 'Provider.propTypes' are incompatible between these types.
    Type 'WeakValidationMap<ProviderProps<null>> | undefined' is not assignable to type 'WeakValidationMap<ProviderProps<ReactReduxContextValue<any, AnyAction>>> | undefined'.
      Type 'WeakValidationMap<ProviderProps<null>>' is not assignable to type 'WeakValidationMap<ProviderProps<ReactReduxContextValue<any, AnyAction>>>'.
        Types of property 'value' are incompatible.
          Type 'Validator<null | undefined> | undefined' is not assignable to type 'Validator<ReactReduxContextValue<any, AnyAction>> | undefined'.
            Type 'Validator<null | undefined>' is not assignable to type 'Validator<ReactReduxContextValue<any, AnyAction>>'.
              Type 'null | undefined' is not assignable to type 'ReactReduxContextValue<any, AnyAction>'.
                Type 'undefined' is not assignable to type 'ReactReduxContextValue<any, AnyAction>'.ts(2345)

[trblackw]

@markerikson

I would expect that React.createContext(null) is indeed invalid

I would suggest changing the docs then because this is the example context that’s used

[markerikson]

So here we get into the issues of distinguishing what is legal runtime behavior, and what is legal compile-time behavior.

The initial value for a React context that you pass to React.createContext() will only be used at runtime if you try to consume the context without a corresponding <MyContext.Provider> around it. In practical usage, this almost never happens. So, you can generally get away with defining createContext(null), because that null will never be read from a context.

However, TS doesn’t know that. TS expects that if you say a context value looks like {a: number, b: string, c: SomeFancyCallbackType}, that you will provide an object that looks like that at all times. That includes for the initial value.

In plain JS code, null is an entirely acceptable value here. This also means that the current documentation is correct as-is, for plain JS usage, and that page does not try to discuss TS usage at all.

It’s only TS that has to be satisfied. Therefore, the options are:

• Go through the entire exercise of defining an object that exactly matches the shape of what the context value is supposed to be
• Tell TS to shut up and ignore what you’re doing here

Last time I looked, our context looks roughly like {store, subscription}. I haven’t looked over at the TS typings in @types/react-redux to see if they capture what we actually put into context.

Therefore, my advice is to take option 2: just tell TS to shut up. Slap a // @ts-ignore or an as unknown as WhateverTheContextTypeIs on it, and move on.