{"id":11837,"library":"react-redux","title":"React Redux Bindings","description":"React Redux is the official set of React bindings for the Redux state management library. It provides utilities and hooks like `Provider`, `useSelector`, `useDispatch`, and `connect` to integrate Redux stores with React components efficiently. The current stable version is 9.2.0, which includes compatibility for React 19. The package typically follows a release cadence that aligns with major React and Redux core updates, with bugfix and minor feature releases occurring regularly. Key differentiators include its official status, deep integration with the Redux ecosystem, and optimizations for performance in large-scale React applications, such as automatic batching of updates with React 18+.","status":"active","version":"9.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/reduxjs/react-redux","tags":["javascript","react","reactjs","redux","typescript"],"install":[{"cmd":"npm install react-redux","lang":"bash","label":"npm"},{"cmd":"yarn add react-redux","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-redux","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for rendering React components and utilizing React hooks.","package":"react","optional":false},{"reason":"Core state management library that React Redux integrates with.","package":"redux","optional":false}],"imports":[{"note":"The primary component used to make the Redux store available to React components. CommonJS `require` syntax is not recommended since v9 due to improved ESM/CJS compatibility.","wrong":"const { Provider } = require('react-redux');","symbol":"Provider","correct":"import { Provider } from 'react-redux';"},{"note":"A named export hook for extracting data from the Redux store state, replacing `mapStateToProps` for function components. It's not a default export.","wrong":"import useSelector from 'react-redux';","symbol":"useSelector","correct":"import { useSelector } from 'react-redux';"},{"note":"A named export hook for getting the Redux store's `dispatch` function, replacing `mapDispatchToProps` for function components.","wrong":"import useDispatch from 'react-redux';","symbol":"useDispatch","correct":"import { useDispatch } from 'react-redux';"},{"note":"The higher-order component for connecting React components to the Redux store. Still supported for class components or when fine-grained control over re-renders is needed, but hooks are preferred for function components. Named export, not default.","wrong":"import connect from 'react-redux';","symbol":"connect","correct":"import { connect } from 'react-redux';"},{"note":"Re-exported for manual batching of updates, though React 18+ automatically batches most updates. Direct import of `unstable_batchedUpdates` from `react-dom` or `react-native` is no longer necessary or recommended since v9.0.3.","wrong":"import { unstable_batchedUpdates } from 'react-dom';","symbol":"batch","correct":"import { batch } from 'react-redux';"},{"note":"This is a TypeScript type, specifically for pre-typing `useSelector`. The `type` keyword is crucial for type-only imports, especially with `isolatedModules` enabled. Since v9.1.0, the `.withTypes` syntax offers an alternative for pre-typing.","wrong":"import { TypedUseSelectorHook } from 'react-redux';","symbol":"TypedUseSelectorHook","correct":"import type { TypedUseSelectorHook } from 'react-redux';"}],"quickstart":{"code":"import React from 'react';\nimport { createStore } from 'redux';\nimport { Provider, useSelector, useDispatch } from 'react-redux';\n\n// Redux Store Setup\ninterface RootState { count: number; }\nconst initialState: RootState = { count: 0 };\n\nfunction counterReducer(state = initialState, action: { type: string }) {\n  switch (action.type) {\n    case 'increment': return { count: state.count + 1 };\n    case 'decrement': return { count: state.count - 1 };\n    default: return state;\n  }\n}\n\nconst store = createStore(counterReducer);\n\n// React Component\nfunction Counter() {\n  const count = useSelector((state: RootState) => state.count);\n  const dispatch = useDispatch();\n\n  return (\n    <div>\n      <h1>Count: {count}</h1>\n      <button onClick={() => dispatch({ type: 'increment' })}>+</button>\n      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>\n    </div>\n  );\n}\n\n// App Root\nfunction App() {\n  return (\n    <Provider store={store}>\n      <Counter />\n    </Provider>\n  );\n}\n\nexport default App;\n","lang":"typescript","description":"This quickstart demonstrates setting up a basic Redux store with `createStore`, providing it to a React application via `Provider`, and consuming the state and dispatching actions in a functional component using the `useSelector` and `useDispatch` hooks. It includes basic TypeScript types for the state."},"warnings":[{"fix":"Upgrade your React installation to v18 or later and Redux to v5.0.0 or later (or Redux Toolkit to v2.0.0 or later).","message":"React Redux v9.0.0 requires React 18+ and Redux 5.0+ (or Redux Toolkit 2.0+). Older versions of React or Redux are no longer supported.","severity":"breaking","affected_versions":">=9.0.0"},{"fix":"Ensure your bundler (Webpack, Rollup, Vite) is configured to handle modern module resolutions. Avoid direct imports from internal paths, preferring top-level named exports.","message":"The package's internal build outputs and module resolution have changed significantly in v9.0.0 for improved ESM/CJS compatibility. This might affect bundler configurations or direct file imports if you were relying on specific internal paths.","severity":"breaking","affected_versions":">=9.0.0"},{"fix":"For applications using React 18+, rely on React's automatic batching. Only use `batch` for specific scenarios where explicit batching of non-React updates is required. Do not import `unstable_batchedUpdates` directly from `react-dom` or `react-native`.","message":"Automatic batching of Redux updates is handled by React 18+. The `batch` utility from `react-redux` is still exported but is generally not needed unless you are performing updates outside of React's event system or need specific batching behavior.","severity":"gotcha","affected_versions":">=9.0.3"},{"fix":"Ensure your `react-native` version is compatible with React 18. If encountering import/bundling issues in React Native projects, verify you are on `react-redux` v9.0.2 or later for specific RN bundle tweaks.","message":"The awkward peer dependency on `react-native` for `unstable_batchedUpdates` was removed in v9.1.2. React Native projects should now work more seamlessly, but specific `react-native` related bundling issues have been addressed in earlier 9.x patch releases.","severity":"breaking","affected_versions":">=9.1.2"},{"fix":"Create typed versions of your hooks: `export const useAppDispatch = useDispatch.withTypes<AppDispatch>();` and `export const useAppSelector = useSelector.withTypes<RootState>();`.","message":"When using TypeScript, remember to pre-type your `useSelector` and `useDispatch` hooks to avoid needing to provide types at every call site. Version 9.1.0 introduced the `.withTypes` syntax for this.","severity":"gotcha","affected_versions":">=9.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Add `'use client';` at the top of the file where your `Provider` and client-side logic resides. React Redux v9.0.0 explicitly throws on use in RSCs to indicate incompatibility.","cause":"Attempting to use `Provider` or other React Context-reliant components in a React Server Component (RSC) environment without the `'use client'` directive.","error":"Uncaught Error: createContext only works in Client Components. Add the \"use client\" directive at the top of the file to use it. Or, use a different wrapper for your store."},{"fix":"Ensure your `Provider` component receives a `store` prop: `<Provider store={myReduxStore}>...</Provider>`. In tests, wrap components with a test `Provider` or mock `useSelector`/`useDispatch`.","cause":"The `Provider` component was rendered without a `store` prop, or the store context was not properly set up in testing environments.","error":"Error: `react-redux` requires a `store` to be passed to the `Provider` component. Either pass a `store` prop or provide one through context."},{"fix":"Verify that your `createStore` or `configureStore` call successfully returns a valid store object and that this object is correctly passed to the `Provider`'s `store` prop. Check for typos or asynchronous initialization issues.","cause":"This usually indicates that the Redux store object is `undefined` or `null` when React Redux attempts to access it, often due to an incorrectly initialized `Provider` or a problem in the store creation logic.","error":"TypeError: Cannot read properties of undefined (reading 'getState') (often in relation to 'store')"}],"ecosystem":"npm"}