React Redux Bindings

Common errors

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

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

  cause 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')

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

Warnings

• breaking 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.
  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).
• breaking 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.
  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.
• gotcha 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.
  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`.
• breaking 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.
  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.
• gotcha 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.
  Fix: Create typed versions of your hooks: `export const useAppDispatch = useDispatch.withTypes<AppDispatch>();` and `export const useAppSelector = useSelector.withTypes<RootState>();`.

Install

• npm install react-redux npm
• yarn add react-redux yarn
• pnpm add react-redux pnpm

Imports

• Provider
  wrong:

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

  correct:

  import { Provider } from '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
  wrong:

  import useSelector from 'react-redux';

  correct:

  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
  wrong:

  import useDispatch from 'react-redux';

  correct:

  import { useDispatch } from 'react-redux';

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

  import connect from 'react-redux';

  correct:

  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
  wrong:

  import { unstable_batchedUpdates } from 'react-dom';

  correct:

  import { batch } from 'react-redux';

  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
  wrong:

  import { TypedUseSelectorHook } from 'react-redux';

  correct:

  import type { 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.

Quickstart

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;