CODEWITHSUNDEEP
reactjstypescriptreduxreact-reduxreact-hooks
Alf Nielsen
Alf Nielsen

Reputation: 1382

<Provider> is not available for module (external) hook

I have created the module react-redux-area but hooks in the module file dont work.

At run time I get this error: could not find react-redux context value; please ensure the component is wrapped in a <Provider>

I cannot see any real differents to other similar external hooks, so Im stock in my tries to fix the issue. Any help and suggestion is really appreciated.


export const useMyArea = () => {
  const dispatch = useDispatch();             // <- No problem getting context here
  useDispatchActions(myAreaActions);          // <- This line DONT work!
  useCreateActionDispatchers(myAreaActions);  // <- This line work! (Another external hook)
  // Debugging why provider dont works for useDispatchActions!
  console.log(useDispatchActions.toString());
  console.log(useCreateActionDispatchers.toString());
  //const dispatchActions = useDispatchActions(myAreaActions);
  //useDispatchActions(myAreaActions);

  // This is the function that the useDispatchActions uses internally
  // Which work fine then the dispatch is add as argument
  const dispatchActions = CreateDispatchActions(dispatch, myAreaActions);


  const areaState = useSelector((state: IStoreState) => state.myArea);
  return {
    ...areaState,
    ...dispatchActions
  };
};

Module code:

The module is on gtihub: https://github.com/alfnielsen/react-redux-area/blob/master/ReactReduxArea.ts

const useDispatchActions = <T extends MapMethodWithActionName<T>>(
   actionCreatorListObject: T
) => {
   const dispatch = useDispatch()
   const memoDispatchActionsObject = useMemo(
      () => CreateDispatchActions(dispatch, actionCreatorListObject),
      [dispatch, actionCreatorListObject]
   )
   return memoDispatchActionsObject
}

Sandbox example:

I have other modules that can use hook and in the example on codesandbox, and I uses this inside an app hook, that dont have the problem.

(line 44 in MyArea.ts dont work, while the same kind of external module hook works for line 45)

https://codesandbox.io/s/redux-area-base-ex-s5bg1?file=/src/MyArea.ts

Upvotes: 0

Views: 917

Answers (2)

Minaro
Minaro

Reputation: 197

I solved it by setting the same version in the package and in the project. So npm solve the dependencies, without installing node_modules inside the package. So if you have "react-intl": "^5.10.9" in your project package.json fix the package package.json with the same version.

Upvotes: 0

Shlang
Shlang

Reputation: 3240

Why it does not work

You bundled your library including react-redux (it is listed in dependencies section of package.json) so when this library is used in some app that also contains react-redux as a dependency it ends up with two different copies of react-redux (it actually depends on bundler config). In other words, the useDispatch in react-redux-action-dispatchers-hook is not the one that is used in the app so it does not "see" App's provider.

Take a look at the stack trace in your example:

useReduxContext
https://s5bg1.csb.app/node_modules/react-redux/7.2.0/es/hooks/useReduxContext.js:11:11

useStore
https://s5bg1.csb.app/node_modules/react-redux/7.2.0/es/hooks/useStore.js:17:28

useDispatch
https://s5bg1.csb.app/node_modules/react-redux/7.2.0/es/hooks/useDispatch.js:14:17

useDispatchActions
https://s5bg1.csb.app/node_modules/react-redux-area/out/ReactReduxArea.js:35:36

useDispatchActions uses useDispatch from react-redux version 7.2.0 while the one, listed in the app (see packaje.json) is 7.1.1

How to fix it

Do not bundle react-redux in your library, it should be a peer dependency.

Upvotes: 1

Related Questions