This error occurs when React-Redux hooks like useSelector or useDispatch are called outside of a Provider component. The fix involves wrapping your component tree with <Provider store={store}> or ensuring custom context hooks are used correctly.
React-Redux uses React's Context API to provide the Redux store to components throughout your application. When you call hooks like `useSelector` or `useDispatch`, they look for the Redux store in the nearest React-Redux context. The error "Invariant failed: could not find react-redux context value" means that a component is trying to access the Redux store, but there's no Provider component higher up in the component tree that supplies the store context. This typically happens when: 1. You forget to wrap your app with the Redux Provider 2. You're using hooks in a component that's rendered outside the Provider tree 3. You have multiple React/React-Redux instances causing context mismatch 4. You're using custom contexts incorrectly The Provider component creates the React context that holds your Redux store, and all hooks depend on finding this context value. Without it, React-Redux cannot connect to your store.
Ensure your entire React application is wrapped with the Redux Provider component. In your main entry file (usually index.js, App.js, or _app.js in Next.js):
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './app/store';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Provider store={store}>
<App />
</Provider>
);For Next.js with App Router:
// app/providers.tsx
'use client';
import { Provider } from 'react-redux';
import { store } from '@/lib/store';
export function Providers({ children }: { children: React.ReactNode }) {
return <Provider store={store}>{children}</Provider>;
}
// app/layout.tsx
import { Providers } from './providers';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<Providers>{children}</Providers>
</body>
</html>
);
}Verify that every component using Redux hooks is a descendant of the Provider. Common issues:
1. Modal/dialog components that render via ReactDOM.createPortal or similar
2. Third-party components that might render outside your tree
3. Dynamic imports that load components separately
For portals or similar cases, ensure the portal target is still within the Provider:
// Modal component that uses Redux
function MyModal() {
const data = useSelector(state => state.modal.data); // This needs Provider!
// ...
}
// App component
function App() {
return (
<Provider store={store}>
{/* Modal renders here via portal, but portal target is inside Provider */}
<div id="modal-root"></div>
<MainContent />
</Provider>
);
}Multiple copies of React or React-Redux can cause context mismatch. Check with:
npm ls react react-redux
# or
yarn why react react-reduxSolutions:
1. Use peerDependencies in shared packages:
// In your shared package's package.json
{
"peerDependencies": {
"react": "^18.0.0",
"react-redux": "^9.0.0"
},
"devDependencies": {
"react": "^18.0.0",
"react-redux": "^9.0.0"
}
}2. Add resolutions in main app (Yarn):
{
"resolutions": {
"react": "^18.0.0",
"react-redux": "^9.0.0"
}
}3. Use Webpack aliases:
// webpack.config.js
module.exports = {
resolve: {
alias: {
react: path.resolve(__dirname, 'node_modules/react'),
'react-redux': path.resolve(__dirname, 'node_modules/react-redux')
}
}
};Import from main package:
// Correct
import { useSelector } from 'react-redux';
// Wrong
import { useSelector } from 'react-redux/es/connect/connect';For custom contexts:
If you're using a custom React-Redux context, you must use the corresponding custom hooks:
import { createStoreHook, createDispatchHook } from 'react-redux';
import { MyContext } from './my-context';
// Create custom hooks for your context
const useStore = createStoreHook(MyContext);
const useDispatch = createDispatchHook(MyContext);
function MyComponent() {
const store = useStore(); // Uses custom context
const dispatch = useDispatch();
// ...
}
// Wrap with custom Provider
<Provider context={MyContext} store={store}>
<App />
</Provider>Using default hooks with a custom context Provider will cause this error.
When testing components that use Redux hooks, wrap them in Provider:
// With React Testing Library
import { render } from '@testing-library/react';
import { Provider } from 'react-redux';
import { store } from './store';
import Component from './Component';
test('renders component', () => {
const { getByText } = render(
<Provider store={store}>
<Component />
</Provider>
);
// ...
});
// Or create a custom render function
function renderWithProviders(ui, options = {}) {
const { store = createStore(), ...renderOptions } = options;
function Wrapper({ children }) {
return <Provider store={store}>{children}</Provider>;
}
return { store, ...render(ui, { wrapper: Wrapper, ...renderOptions }) };
}### Debugging Context Issues
Use React DevTools to inspect the component tree and see which components have context:
1. Open React DevTools in your browser
2. Select a component using Redux hooks
3. Check the "Context" tab - you should see "ReactReduxContext"
4. If missing, trace up the tree to find where Provider should be
### Server-Side Rendering (SSR)
For Next.js or other SSR frameworks:
// pages/_app.js (Next.js Pages Router)
import { Provider } from 'react-redux';
import { store } from '../store';
function MyApp({ Component, pageProps }) {
return (
<Provider store={store}>
<Component {...pageProps} />
</Provider>
);
}### Multiple Stores Architecture
If you need multiple Redux stores (rare), you must use separate Providers with custom contexts:
const AdminContext = React.createContext(null);
const UserContext = React.createContext(null);
function App() {
return (
<Provider store={adminStore} context={AdminContext}>
<Provider store={userStore} context={UserContext}>
{/* Components use createStoreHook(AdminContext) or createStoreHook(UserContext) */}
</Provider>
</Provider>
);
}### Bundle Analysis
If you suspect bundle issues, analyze your build:
npx source-map-explorer build/static/js/*.jsLook for duplicate React or React-Redux entries.
React Hook useCallback has a missing dependency: 'variable'. Either include it or remove the dependency array react-hooks/exhaustive-deps
React Hook useCallback has a missing dependency
Cannot use private fields in class components without TS support
Cannot use private fields in class components without TS support
Cannot destructure property 'xxx' of 'undefined'
Cannot destructure property of undefined when accessing props
useNavigate() may be used only in the context of a <Router> component.
useNavigate() may be used only in the context of a Router component
Cannot find module or its corresponding type declarations
How to fix "Cannot find module or type declarations" in Vite