react-redux

library9.2.0jsnpmunverified

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+.

web-framework

npm install react-redux

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-REDUX

react-redux

web-frameworkjavascriptv9.2.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Provider

✓ import { Provider } from 'react-redux';

✗ const { Provider } = require('react-redux');

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.

useSelector

✓ import { useSelector } from 'react-redux';

✗ import useSelector from 'react-redux';

A named export hook for extracting data from the Redux store state, replacing `mapStateToProps` for function components. It's not a default export.

useDispatch

✓ import { useDispatch } from 'react-redux';

✗ import useDispatch from 'react-redux';

A named export hook for getting the Redux store's `dispatch` function, replacing `mapDispatchToProps` for function components.

connect

✓ import { connect } from 'react-redux';

✗ import connect from 'react-redux';

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.

batch

✓ import { batch } from 'react-redux';

✗ import { unstable_batchedUpdates } from 'react-dom';

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.

TypedUseSelectorHook

✓ import type { TypedUseSelectorHook } from 'react-redux';

✗ import { TypedUseSelectorHook } from 'react-redux';

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.

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.

import React from 'react'; import { createStore } from 'redux'; import { Provider, useSelector, useDispatch } from 'react-redux'; // Redux Store Setup interface RootState { count: number; } const initialState: RootState = { count: 0 }; function counterReducer(state = initialState, action: { type: string }) { switch (action.type) { case 'increment': return { count: state.count + 1 }; case 'decrement': return { count: state.count - 1 }; default: return state; } } const store = createStore(counterReducer); // React Component function Counter() { const count = useSelector((state: RootState) => state.count); const dispatch = useDispatch(); return ( <div> <h1>Count: {count}</h1> <button onClick={() => dispatch({ type: 'increment' })}>+</button> <button onClick={() => dispatch({ type: 'decrement' })}>-</button> </div> ); } // App Root function App() { return ( <Provider store={store}> <Counter /> </Provider> ); } export default App;

Debug

Known issues

breakingReact 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.

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).

affects: >=9.0.0

breakingThe 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.

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.

affects: >=9.0.0

gotchaAutomatic 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.

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`.

affects: >=9.0.3

breakingThe 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.

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.

affects: >=9.1.2

gotchaWhen 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.

fix

Create typed versions of your hooks: `export const useAppDispatch = useDispatch.withTypes<AppDispatch>();` and `export const useAppSelector = useSelector.withTypes<RootState>();`.

affects: >=9.1.0

Errors

Common errors & fixes

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.

Attempting to use `Provider` or other React Context-reliant components in a React Server Component (RSC) environment without the `'use client'` directive.

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.

Error: `react-redux` requires a `store` to be passed to the `Provider` component. Either pass a `store` prop or provide one through context.

The `Provider` component was rendered without a `store` prop, or the store context was not properly set up in testing environments.

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`.

TypeError: Cannot read properties of undefined (reading 'getState') (often in relation to 'store')

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.

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.

Upgrade

Version history

9.2.0latest on npm

Audit

Dependencies

reactrequiredRequired for rendering React components and utilizing React hooks.

reduxrequiredCore state management library that React Redux integrates with.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/reduxjs/react-redux ↗

packagehttps://www.npmjs.com/package/react-redux ↗

homepagehttps://react-redux.js.org ↗