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)

Most upvoted comments

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>
image I had the error but all was working well untill lately.

Two things:

  • This is a React-Redux question, not a Redux Toolkit question
  • Per the error, you need to make sure your React component tree is wrapped in <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.)

I think whenever you place const dispatch = useDispatch(); in any components you need to put ‘use client’ at the top, in nextjs 13

thx, worked for me