Reputation: 1382
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
};
};
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
}
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
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
Reputation: 3240
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
Do not bundle react-redux
in your library, it should be a peer dependency.
Upvotes: 1