React-redux: Custom context in documents has a error in typescript

Created on 9 Apr 2020  路  8Comments  路  Source: reduxjs/react-redux

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)

Most helpful comment

@gabrielbezerra81 Unfortunately no, I just gave up on trying to inject my context into the store and instead just have a separate provider. Ultimately in my case it made more sense to have them separate but regardless the typings could definitely use some improvement around this feature.

All 8 comments

Two things:

  • We don't maintain the TS typings in this repo, they're over in DefinitelyTyped
  • Given what we put into context, I would expect that React.createContext(null) is indeed invalid, which is what the error is telling you.

@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

@trblackw Did you find a way to solve this? I could not find a solution.

@gabrielbezerra81 Unfortunately no, I just gave up on trying to inject my context into the store and instead just have a separate provider. Ultimately in my case it made more sense to have them separate but regardless the typings could definitely use some improvement around this feature.

I have the same issue.
I want to use redux on monorepo and share some redux logic on separate package.
but with every try i get to new type error.

this code solve the type error but it still has error for wrapping component to redux provider on run time

const MyContext = React.createContext(
  {} as ReactReduxContextValue<any, AnyAction>
);
export const useStore = createStoreHook(MyContext);
export const useDispatch = createDispatchHook(MyContext);
export const useSelector = createSelectorHook(MyContext);

I met the exact same problem...

@markerikson Excuse me, please reopen this issue.
Also, would you mind if you have a look at this problem?

Was this page helpful?
0 / 5 - 0 ratings