redux-toolkit: Uncaught Error: could not find react-redux context value; please ensure the component is wrapped in a
I want to write a useHook and make some store management methods public in another application. But when I do this I get an error
// My Redux Application which I published
export const useImage = () => {
const dispatch = useAppDispatch()
return {
zoomIn: () => {
dispatch(setZoom("zoomIn"))
},
zoomOut: () => {
dispatch(setZoom("zoomOut"))
},
zoomFitToPage: () => {
dispatch(setZoom("fitToPage"))
},
}
}
// is another application that wants to use public methods from the hook
import './App.css';
import {Markup} from "@cloud/markup-tools";
import "@cloud/markup-tools/dist/reset.css"
import React from "react"
import {useImage} from "@cloud/markup-tools";
function App() {
const {zoomIn, zoomOut, zoomFitToPage} = useImage()
return (
<>
<button onClick={zoomIn}>+</button>
<button onClick={zoomOut}>-</button>
<button onClick={zoomFitToPage}>Fit to Page</button>
<Markup/>
</>
);
}
export default App;
About this issue
- Original URL
- State: closed
- Created a year ago
- Comments: 15 (1 by maintainers)
I think whenever you place const dispatch = useDispatch(); in any components you need to put ‘use client’ at the top, in nextjs 13
same here I’m doing nextjs with Ts I’ve wrapped the main layout’s children within <Provider></Provider>
I had the error but all was working well untill lately.
Two things:
<Provider store={store}>
. (If you have already done that, another likely cause is accidentally having two copies of React or of React-Redux in the final JS bundle.)thx, worked for me
I’m writing about this problem https://stackoverflow.com/questions/38460949/what-is-the-best-way-to-access-redux-store-outside-a-react-component