.codesandbox/ci.json

@@ -0,0 +1,6 @@
+{
+  "sandboxes": ["vanilla", "vanilla-ts"],
+  "node": "20",
+  "buildCommand": "build",
+  "packages": ["."]
+}

.eslintrc.json

@@ -0,0 +1,73 @@
+{
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:import/recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": { "jsx": true },
+    "ecmaVersion": 2015,
+    "project": true,
+    "sourceType": "module"
+  },
+  "plugins": ["@typescript-eslint", "import", "react"],
+  "rules": {
+    "valid-jsdoc": [
+      2,
+      { "requireReturnType": false, "requireParamType": false }
+    ],
+    "react/no-is-mounted": [0]
+  },
+  "settings": {
+    "import/ignore": ["react-native"],
+    "import/resolver": {
+      "typescript": { "extensions": [".js", ".ts", ".tsx"] }
+    },
+    "react": { "version": "detect" }
+  },
+  "overrides": [
+    {
+      "files": ["**/*.{ts,tsx,cts}"],
+      "extends": [
+        "eslint:recommended",
+        "plugin:import/recommended",
+        "plugin:react/recommended",
+        "plugin:react/jsx-runtime",
+        "plugin:@typescript-eslint/recommended"
+      ],
+      "rules": {
+        "@typescript-eslint/ban-ts-comment": [0],
+        "@typescript-eslint/no-redeclare": [2],
+        "@typescript-eslint/no-explicit-any": [0],
+        "@typescript-eslint/no-unused-vars": [0],
+        "@typescript-eslint/ban-types": [0],
+        "react/display-name": [0],
+        "react/jsx-no-undef": [2],
+        "react/jsx-uses-react": [1],
+        "react/jsx-wrap-multilines": [2],
+        "react/no-string-refs": [0],
+        "@typescript-eslint/consistent-type-imports": [
+          2,
+          { "fixStyle": "separate-type-imports" }
+        ],
+        "@typescript-eslint/consistent-type-exports": [2],
+        "valid-jsdoc": [
+          2,
+          { "requireReturnType": false, "requireParamType": false }
+        ],
+        "react/no-is-mounted": [0]
+      }
+    },
+    {
+      "files": ["**/test/**/*.{ts,tsx}"],
+      "parserOptions": { "project": true }
+    }
+  ]
+}

.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

.github/FUNDING.yml

@@ -0,0 +1 @@
+github: [markerikson, timdorr, phryneas]

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,55 @@
+name: 🐛 Bug Report
+description: Something isn't working correctly.
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thank you for contributing to open source!
+
+        Do you need some help?
+        ======================
+
+        The issue tracker is meant for bug reports only. This isn't the best place for support or usage questions. Questions here don't have as much visibility as they do elsewhere. Before you ask a question, here are some resources to get help first:
+
+        - Read the docs: https://react-redux.js.org/
+        - Check out the troubleshooting guide: https://react-redux.js.org/troubleshooting
+        - Look for/ask questions on Stack Overflow: https://stackoverflow.com/questions/tagged/redux
+        - Ask in chat: https://www.reactiflux.com/
+
+        Think you found a bug?
+        ======================
+        The best bug report is a failing test in the repository as a pull request. Otherwise, please use the form below.
+  - type: textarea
+    attributes:
+      label: What version of React, ReactDOM/React Native, Redux, and React Redux are you using?
+      value: |
+        - React: 
+        - ReactDOM/React Native: 
+        - Redux:
+        - React Redux:
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: What is the current behavior?
+      description: |
+        If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to a CodeSandbox (https://codesandbox.io/s/new) or RN Snack (https://snack.expo.io/) example below
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: What is the expected behavior?
+    validations:
+      required: true
+  - type: input
+    attributes:
+      label: Which browser and OS are affected by this issue?
+    validations:
+      required: false
+  - type: checkboxes
+    attributes:
+      label: Did this work in previous versions of React Redux?
+      options:
+        - label: 'Yes'
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,5 @@
+blank_issues_enabled: false
+contact_links:
+  - name: 🤔 Questions and Help
+    url: https://redux.js.org/introduction/getting-started#help-and-discussion
+    about: This is a bug tracker, not a support system. For usage questions, please use our support resources.

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -0,0 +1,34 @@
+name: 👍 Feature Request
+description: I'd like React Redux to do something new.
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thank you for contributing to open source!
+
+        Do you need some help?
+        ======================
+
+        The issue tracker is meant for bug reports only. This isn't the best place for support or usage questions. Questions here don't have as much visibility as they do elsewhere. Before you ask a question, here are some resources to get help first:
+
+        - Read the docs: https://react-redux.js.org/
+        - Check out the troubleshooting guide: https://react-redux.js.org/troubleshooting
+        - Look for/ask questions on Stack Overflow: https://stackoverflow.com/questions/tagged/redux
+        - Ask in chat: https://www.reactiflux.com/
+  - type: textarea
+    attributes:
+      label: What is the new or updated feature that you are suggesting?
+      description: |
+        Please provide thoughtful commentary *and code samples* on what this feature means for your product. What will it allow you to do that you can't do today? How will it make current work-arounds straightforward? What potential bugs and edge cases does it help to avoid? etc. Please keep it product-centric.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Why should this feature be included?
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: What docs changes are needed to explain this?
+    validations:
+      required: true

.github/workflows/publish.yaml

@@ -0,0 +1,24 @@
+name: Publish Package to npmjs
+on:
+  # keeping it purely manual for now as to not accidentally trigger a release
+  #release:
+  #  types: [published]
+  workflow_dispatch:
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    permissions:
+      id-token: write
+      contents: read
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '22.x'
+          registry-url: 'https://registry.npmjs.org'
+          cache: 'yarn'
+      - run: yarn install --frozen-lockfile
+      - run: yarn test
+      - run: npm publish --access public --provenance
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/size.yaml

@@ -0,0 +1,16 @@
+name: Bundle Size
+
+on: [pull_request]
+
+jobs:
+  build:
+    name: Check compressed size
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+      - uses: preactjs/compressed-size-action@v2
+        with:
+          repo-token: '${{ secrets.GITHUB_TOKEN }}'

.github/workflows/test.yml

@@ -0,0 +1,314 @@
+name: Tests
+
+on: [push, pull_request, workflow_dispatch]
+
+jobs:
+  build:
+    name: Build and run test Suite
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node: ['22.x']
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Use node ${{ matrix.node }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node }}
+          cache: 'yarn'
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Lint
+        run: yarn lint
+
+      - name: Run test suite
+        run: yarn test
+
+      - name: Build
+        run: yarn build
+
+      - name: Pack
+        run: yarn pack
+
+      - uses: actions/upload-artifact@v4
+        with:
+          name: package
+          path: ./package.tgz
+
+  test-types:
+    name: Test Types with TypeScript ${{ matrix.ts }} and React ${{ matrix.react.version }}
+
+    needs: [build]
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        node: ['22.x']
+        ts: ['5.0', '5.1', '5.2', '5.3', '5.4', '5.5', '5.6', '5.7', '5.8']
+        react:
+          [
+            {
+              version: '^18',
+              types: ^18,
+              react-dom: { version: '^18', types: '^18' },
+            },
+            {
+              version: '^19',
+              types: '^19',
+              react-dom: { version: '^19', types: '^19' },
+            },
+          ]
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+
+      - name: Use node ${{ matrix.node }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node }}
+          cache: 'yarn'
+
+      - name: Download build artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: package
+          path: .
+
+      - name: Install deps
+        run: yarn install
+
+      - name: Install React ${{ matrix.react.version }} and React-DOM ${{ matrix.react.react-dom.version }}
+        run: yarn add -D react@${{ matrix.react.version }} react-dom@${{ matrix.react.react-dom.version }} @types/react@${{ matrix.react.types }} @types/react-dom@${{ matrix.react.react-dom.types }}
+
+      - name: Install TypeScript ${{ matrix.ts }}
+        run: yarn add typescript@${{ matrix.ts }}
+
+      - name: Install build artifact
+        run: yarn add ./package.tgz
+
+      - name: Erase path aliases
+        run: sed -i -e /@remap-prod-remove-line/d ./tsconfig.base.json
+
+      - name: Test types
+        env:
+          TEST_DIST: true
+        run: |
+          yarn tsc --version
+          yarn type-tests
+
+  are-the-types-wrong:
+    name: Check package config with are-the-types-wrong
+
+    needs: [build]
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        node: ['22.x']
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+
+      - name: Use node ${{ matrix.node }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node }}
+          cache: 'yarn'
+
+      - uses: actions/download-artifact@v4
+        with:
+          name: package
+          path: .
+
+      # Note: We currently expect "FalseCJS" failures for Node16 + `moduleResolution: "node16",
+      - name: Run are-the-types-wrong
+        run: npx @arethetypeswrong/cli ./package.tgz --format table --ignore-rules false-cjs --exclude-entrypoints alternate-renderers
+
+  test-published-artifact:
+    name: Test Published Artifact ${{ matrix.example }}
+
+    needs: [build]
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        node: ['22.x']
+        example:
+          [
+            'cra4',
+            'cra5',
+            'next',
+            'vite',
+            'node-standard',
+            'node-esm',
+            'react-native',
+            'expo',
+          ]
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+
+      - name: Use node ${{ matrix.node }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node }}
+          cache: 'yarn'
+
+      - name: Clone RTK repo
+        run: git clone https://github.com/reduxjs/redux-toolkit.git ./redux-toolkit
+
+      - name: Cache example deps
+        uses: actions/cache@v4
+        with:
+          path: ./redux-toolkit/examples/publish-ci/${{ matrix.example }}/node_modules
+          key: test-published-artifact-${{ matrix.example }}-node_modules
+
+      - name: Check folder contents
+        run: ls -l .
+
+      - name: Install example deps
+        working-directory: ./redux-toolkit/examples/publish-ci/${{ matrix.example }}
+        run: yarn install
+
+      - name: Install Playwright browser if necessary
+        working-directory: ./redux-toolkit/examples/publish-ci/${{ matrix.example }}
+        continue-on-error: true
+        run: yarn playwright install || true
+
+      - uses: actions/download-artifact@v4
+        with:
+          name: package
+          path: ./redux-toolkit/examples/publish-ci/${{ matrix.example }}
+
+      - name: Check folder contents
+        working-directory: ./redux-toolkit/examples/publish-ci/${{ matrix.example }}
+        run: ls -l .
+
+      - name: Install build artifact
+        working-directory: ./redux-toolkit/examples/publish-ci/${{ matrix.example }}
+        run: yarn add ./package.tgz
+
+      - name: Show installed package versions
+        working-directory: ./redux-toolkit/examples/publish-ci/${{ matrix.example }}
+        run: yarn info react-redux && yarn why react-redux
+
+      - name: Build example
+        working-directory: ./redux-toolkit/examples/publish-ci/${{ matrix.example }}
+        env:
+          NODE_OPTIONS: --openssl-legacy-provider
+        run: yarn build
+
+      - name: Run test step
+        working-directory: ./redux-toolkit/examples/publish-ci/${{ matrix.example }}
+        run: yarn test
+
+  test-published-artifact-local:
+    name: Test Published Artifact (Local) ${{ matrix.example }}
+
+    needs: [build]
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        node: ['22.x']
+        example: ['rr-rsc-context']
+    defaults:
+      run:
+        working-directory: ./examples/publish-ci/${{ matrix.example }}
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+
+      - name: Use node ${{ matrix.node }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node }}
+          cache: 'yarn'
+
+      - name: Install deps
+        run: yarn install
+
+      - name: Remove existing React-Redux
+        run: yarn remove react-redux
+
+      - uses: actions/download-artifact@v4
+        with:
+          name: package
+          path: ./examples/publish-ci/${{ matrix.example }}
+
+      - name: Check folder contents
+        run: ls -l .
+
+      - name: Install build artifact
+        run: yarn add ./package.tgz
+
+      - name: Show installed React-Redux versions
+        run: yarn info react-redux && yarn why react-redux
+
+      - name: Build example
+        run: yarn build
+
+  test-dist:
+    name: Run local tests against build artifact (React ${{ matrix.react.version }})
+    needs: [build]
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        node: ['22.x']
+        react:
+          [
+            {
+              version: '^18',
+              types: ^18,
+              react-dom: { version: '^18', types: '^18' },
+            },
+            {
+              version: '^19',
+              types: '^19',
+              react-dom: { version: '^19', types: '^19' },
+            },
+          ]
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+
+      - name: Use node ${{ matrix.node }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node }}
+          cache: 'yarn'
+
+      - name: Install deps
+        run: yarn install
+
+      - name: Download build artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: package
+          path: .
+
+      - name: Check folder contents
+        run: ls -lah
+
+      - name: Install React ${{ matrix.react.version }} and React-DOM ${{ matrix.react.react-dom.version }}
+        run: yarn add -D react@${{ matrix.react.version }} react-dom@${{ matrix.react.react-dom.version }} @types/react@${{ matrix.react.types }} @types/react-dom@${{ matrix.react.react-dom.types }}
+
+      - name: Install build artifact
+        run: yarn add ./package.tgz
+
+      - name: Erase path aliases
+        run: sed -i -e /@remap-prod-remove-line/d ./tsconfig.base.json
+
+      - name: Run local tests against the build artifact
+        env:
+          TEST_DIST: true
+        run: yarn test

.gitignore

@@ -1,23 +1,37 @@
 node_modules
-npm-debug.log
-.DS_Store
 dist
 lib
-.nyc_output
 coverage
 es
-test/**/lcov.info
-test/**/lcov-report
-test/react/*/test/**/*.spec.js
-test/react/**/src
-test/jest-config.json
-lcov.info
+temp/
+react-redux-*/
+redux-toolkit/
+.vscode/
+
+.cache/
+.yarn/cache/
+website/.yarn/
+.yarnrc
+.yarn/*
+!.yarn/patches
+!.yarn/releases
+!.yarn/plugins
+!.yarn/sdks
+!.yarn/versions
+.pnp.*
+*.tgz
+
+.yalc
+yalc.lock
+yalc.sig
 
 lib/core/metadata.js
 lib/core/MetadataBlog.js
 
 website/translated_docs
 website/build/
-website/yarn.lock
 website/node_modules
 website/i18n/*
+
+tsconfig.vitest-temp.json
+

.prettierignore

@@ -0,0 +1,2 @@
+dist/
+build*/

.release-it.json

@@ -0,0 +1,8 @@
+{
+  "hooks": {
+    "after:bump": "yarn && git add -u"
+  },
+  "git": {
+    "tagName": "v${version}"
+  }
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "typescript.tsdk": "node_modules/typescript/lib"
+}

.yarnrc.yml

@@ -0,0 +1,7 @@
+compressionLevel: mixed
+
+enableGlobalCache: false
+
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.4.1.cjs

CODE_OF_CONDUCT.md

@@ -11,4 +11,3 @@ Project maintainers have the right and responsibility to remove, edit, or reject
 Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by opening an issue or contacting one or more of the project maintainers.
 
 This Code of Conduct is adapted from the [Contributor Covenant](http://contributor-covenant.org), version 1.0.0, available at [http://contributor-covenant.org/version/1/0/0/](http://contributor-covenant.org/version/1/0/0/)
-

CONTRIBUTING.md

@@ -1,7 +1,11 @@
 # Contributing
-We are open to, and grateful for, any contributions made by the community.  By contributing to React Redux, you agree to abide by the [code of conduct](https://github.com/reduxjs/react-redux/blob/master/CODE_OF_CONDUCT.md).
+
+We are open to, and grateful for, any contributions made by the community. By contributing to React Redux, you agree to abide by the [code of conduct](https://github.com/reduxjs/react-redux/blob/master/CODE_OF_CONDUCT.md).
+
+Please review the [Redux Style Guide](https://redux.js.org/style-guide/style-guide) in the Redux docs to keep track of our best practices.
 
 ## Reporting Issues and Asking Questions
+
 Before opening an issue, please search the [issue tracker](https://github.com/reduxjs/react-redux/issues) to make sure your issue hasn't already been reported.
 
 Please ask any general and implementation specific questions on [Stack Overflow with a Redux tag](http://stackoverflow.com/questions/tagged/redux?sort=votes&pageSize=50) for support.
@@ -11,123 +15,56 @@ Please ask any general and implementation specific questions on [Stack Overflow
 Visit the [Issue tracker](https://github.com/reduxjs/react-redux/issues) to find a list of open issues that need attention.
 
 Fork, then clone the repo:
+
 ```
 git clone https://github.com/your-username/react-redux.git
 ```
 
-### Building
-
-Running the `build` task will create both a CommonJS module-per-module build and a UMD build.
-```
-npm run build
-```
+This repository uses Yarn v2 to manage packages. You'll need to have Yarn v1.22 installed globally on your system first, as Yarn v2 depends on that being available first. Install dependencies with:
 
-To create just a CommonJS module-per-module build:
 ```
-npm run build:lib
+yarn install
 ```
 
-To create just a UMD build:
-```
-npm run build:umd
-npm run build:umd:min
-```
-
-### Testing and Linting
-
-To run the tests in the latest React version:
-```
-npm run test
-```
+### Building
 
-To run in explicit React versions (the number is the version, so `test:16.3` will run in React version `16.3`):
-```
-REACT=16.4 npm run test
-```
+Running the `build` task will create both a CommonJS module-per-module build and a UMD build.
 
-To run tests in all supported React versions, `16.4`, 16.5`,
 ```
-REACT=all npm run test
+yarn build
 ```
 
-To continuously watch and run tests, run the following:
-```
-npm run test -- --watch
-```
+To create just a CommonJS module-per-module build:
 
-To perform linting with `eslint`, run the following:
 ```
-npm run lint
+yarn build:lib
 ```
 
-#### Adding a new React version for testing
-
-To add a new version of React to test react-redux against, create a directory structure
-in this format for React version `XX`:
+To create just a UMD build:
 
 ```
-test/
- react/
-  XX/
-   package.json
-   test/
+yarn build:umd
+yarn build:umd:min
 ```
 
-So, for example, to test against React 15.4:
+### Testing and Linting
 
+To run the tests:
 
 ```
-test/
- react/
-  15.4/
-   package.json
-   test/
+yarn test
 ```
 
-The package.json must include the correct versions of `react` & `react-dom`
-as well as the needed `create-react-class` like this:
-
-```json
-{
-  "private": true,
-  "devDependencies": {
-    "create-react-class": "^15.6.3",
-    "react": "15.4",
-    "react-dom": "15.4"
-  }
-}
-```
-
-Then you can run tests against this version with:
+To continuously watch and run tests, run the following:
 
 ```
-REACT=15.4 npm run test
+yarn test --watch
 ```
 
-and the new version will also be automatically included in
+To perform linting with `eslint`, run the following:
 
 ```
-REACT=all npm run test
-```
-
-In addition, the new version should be added to the .travis.yml matrix list:
-
-```yaml
-language: node_js
-node_js:
-  - "8"
-before_install:
-  - 'nvm install-latest-npm'
-env:
-  matrix:
-  - REACT=16.4
-  - REACT=16.5
-sudo: false
-script:
-  - npm run lint
-  - npm run test
-after_success:
-  - npm run coverage
+yarn lint
 ```
 
 ### New Features
@@ -136,11 +73,11 @@ Please open an issue with a proposal for a new feature or refactoring before sta
 
 ## Submitting Changes
 
-* Open a new issue in the [Issue tracker](https://github.com/reduxjs/react-redux/issues).
-* Fork the repo.
-* Create a new feature branch based off the `master` branch.
-* Make sure all tests pass and there are no linting errors.
-* Submit a pull request, referencing any issues it addresses.
+- Open a new issue in the [Issue tracker](https://github.com/reduxjs/react-redux/issues).
+- Fork the repo.
+- Create a new feature branch based off the `master` branch.
+- Make sure all tests pass and there are no linting errors.
+- Submit a pull request, referencing any issues it addresses.
 
 Please try to keep your pull request focused in scope and avoid including unrelated commits.
 

README.md

@@ -1,43 +1,63 @@
-React Redux
-=========================
+# React Redux
 
-Official React bindings for [Redux](https://github.com/reduxjs/redux).  
+Official React bindings for [Redux](https://github.com/reduxjs/redux).
 Performant and flexible.
 
-[![build status](https://img.shields.io/travis/reduxjs/react-redux/master.svg?style=flat-square)](https://travis-ci.org/reduxjs/react-redux) [![npm version](https://img.shields.io/npm/v/react-redux.svg?style=flat-square)](https://www.npmjs.com/package/react-redux)
+![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/reduxjs/react-redux/test.yml?style=flat-square) [![npm version](https://img.shields.io/npm/v/react-redux.svg?style=flat-square)](https://www.npmjs.com/package/react-redux)
 [![npm downloads](https://img.shields.io/npm/dm/react-redux.svg?style=flat-square)](https://www.npmjs.com/package/react-redux)
-[![redux channel on discord](https://img.shields.io/badge/discord-redux@reactiflux-61DAFB.svg?style=flat-square)](http://www.reactiflux.com)
-
+[![#redux channel on Discord](https://img.shields.io/badge/discord-redux@reactiflux-61DAFB.svg?style=flat-square)](http://www.reactiflux.com)
 
 ## Installation
 
-React Redux requires **React 16.4 or later.**
+### Create a React Redux App
 
-```
-npm install --save react-redux
+The recommended way to start new apps with React and Redux is by using [our official Redux+TS template for Vite](https://github.com/reduxjs/redux-templates), or by creating a new Next.js project using [Next's `with-redux` template](https://github.com/vercel/next.js/tree/canary/examples/with-redux).
+
+Both of these already have Redux Toolkit and React-Redux configured appropriately for that build tool, and come with a small example app that demonstrates how to use several of Redux Toolkit's features.
+
+```bash
+# Vite with our Redux+TS template
+# (using the `degit` tool to clone and extract the template)
+npx degit reduxjs/redux-templates/packages/vite-template-redux my-app
+
+# Next.js using the `with-redux` template
+npx create-next-app --example with-redux my-app
 ```
 
-This assumes that you’re using [npm](http://npmjs.com/) package manager with a module bundler like [Webpack](https://webpack.js.org/) or [Browserify](http://browserify.org/) to consume [CommonJS modules](http://webpack.github.io/docs/commonjs.html).
+### An Existing React App
 
-If you don’t yet use [npm](http://npmjs.com/) or a modern module bundler, and would rather prefer a single-file [UMD](https://github.com/umdjs/umd) build that makes `ReactRedux` available as a global object, you can grab a pre-built version from [cdnjs](https://cdnjs.com/libraries/react-redux). We *don’t* recommend this approach for any serious application, as most of the libraries complementary to Redux are only available on [npm](http://npmjs.com/).
+React Redux 9.0 requires **React 18 or later**
 
-## React Native
+To use React Redux with your React app, install it as a dependency:
 
-As of React Native 0.18, React Redux 5.x should work with React Native. If you have any issues with React Redux 5.x on React Native, run `npm ls react` and make sure you don’t have a duplicate React installation in your `node_modules`. We recommend that you use `npm@3.x` which is better at avoiding these kinds of issues.
+```bash
+# If you use npm:
+npm install react-redux
 
-If you are on an older version of React Native, you’ll need to keep using [React Redux 3.x branch and documentation](https://github.com/reduxjs/react-redux/tree/v3.1.0) because of [this problem](https://github.com/facebook/react-native/issues/2985).
+# Or if you use Yarn:
+yarn add react-redux
+```
 
-## Documentation
+You'll also need to [install Redux](https://redux.js.org/introduction/installation) and [set up a Redux store](https://redux.js.org/recipes/configuring-your-store/) in your app.
+
+This assumes that you’re using [npm](http://npmjs.com/) package manager
+with a module bundler like [Webpack](https://webpack.js.org/) or
+[Browserify](http://browserify.org/) to consume [CommonJS
+modules](https://webpack.js.org/api/module-methods/#commonjs).
 
-The React Redux docs are now published at **https://react-redux.js.org** .
+If you don’t yet use [npm](http://npmjs.com/) or a modern module bundler, and would rather prefer a single-file [UMD](https://github.com/umdjs/umd) build that makes `ReactRedux` available as a global object, you can grab a pre-built version from [cdnjs](https://cdnjs.com/libraries/react-redux). We _don’t_ recommend this approach for any serious application, as most of the libraries complementary to Redux are only available on [npm](http://npmjs.com/).
 
-We're currently expanding and rewriting our docs content - check back soon for more updates!
+## Documentation
+
+The React Redux docs are published at **https://react-redux.js.org** .
 
 ## How Does It Work?
 
-We do a deep dive on how React Redux works in [this readthesource episode](https://www.youtube.com/watch?v=VJ38wSFbM3A).  
-Enjoy!
+The post [The History and Implementation of React-Redux](https://blog.isquaredsoftware.com/2018/11/react-redux-history-implementation/)
+explains what it does, how it works, and how the API and implementation have evolved over time.
+
+There's also a [Deep Dive into React-Redux](https://blog.isquaredsoftware.com/2019/06/presentation-react-redux-deep-dive/) talk that covers some of the same material at a higher level.
 
 ## License
 
-MIT
+[MIT](LICENSE.md)

api-extractor.dt-types.json

@@ -0,0 +1,356 @@
+/**
+ * Config file for API Extractor.  For more info, please visit: https://api-extractor.com
+ */
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
+
+  /**
+   * Optionally specifies another JSON config file that this file extends from.  This provides a way for
+   * standard settings to be shared across multiple projects.
+   *
+   * If the path starts with "./" or "../", the path is resolved relative to the folder of the file that contains
+   * the "extends" field.  Otherwise, the first path segment is interpreted as an NPM package name, and will be
+   * resolved using NodeJS require().
+   *
+   * SUPPORTED TOKENS: none
+   * DEFAULT VALUE: ""
+   */
+  // "extends": "./shared/api-extractor-base.json"
+  // "extends": "my-package/include/api-extractor-base.json"
+
+  /**
+   * Determines the "<projectFolder>" token that can be used with other config file settings.  The project folder
+   * typically contains the tsconfig.json and package.json config files, but the path is user-defined.
+   *
+   * The path is resolved relative to the folder of the config file that contains the setting.
+   *
+   * The default value for "projectFolder" is the token "<lookup>", which means the folder is determined by traversing
+   * parent folders, starting from the folder containing api-extractor.json, and stopping at the first folder
+   * that contains a tsconfig.json file.  If a tsconfig.json file cannot be found in this way, then an error
+   * will be reported.
+   *
+   * SUPPORTED TOKENS: <lookup>
+   * DEFAULT VALUE: "<lookup>"
+   */
+  "projectFolder": ".",
+
+  /**
+   * (REQUIRED) Specifies the .d.ts file to be used as the starting point for analysis.  API Extractor
+   * analyzes the symbols exported by this module.
+   *
+   * The file extension must be ".d.ts" and not ".ts".
+   *
+   * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+   * prepend a folder token such as "<projectFolder>".
+   *
+   * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+   */
+  "mainEntryPointFilePath": "node_modules/@types/react-redux/index.d.ts",
+  //"mainEntryPointFilePath": "/home/weber/tmp/rtk-origin-master/dist/index.d.ts",
+
+  /**
+   * A list of NPM package names whose exports should be treated as part of this package.
+   *
+   * For example, suppose that Webpack is used to generate a distributed bundle for the project "library1",
+   * and another NPM package "library2" is embedded in this bundle.  Some types from library2 may become part
+   * of the exported API for library1, but by default API Extractor would generate a .d.ts rollup that explicitly
+   * imports library2.  To avoid this, we can specify:
+   *
+   *   "bundledPackages": [ "library2" ],
+   *
+   * This would direct API Extractor to embed those types directly in the .d.ts rollup, as if they had been
+   * local files for library1.
+   */
+  "bundledPackages": [],
+
+  /**
+   * Determines how the TypeScript compiler engine will be invoked by API Extractor.
+   */
+  "compiler": {
+    /**
+     * Specifies the path to the tsconfig.json file to be used by API Extractor when analyzing the project.
+     *
+     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+     * prepend a folder token such as "<projectFolder>".
+     *
+     * Note: This setting will be ignored if "overrideTsconfig" is used.
+     *
+     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+     * DEFAULT VALUE: "<projectFolder>/tsconfig.json"
+     */
+    // "tsconfigFilePath": "<projectFolder>/tsconfig.json",
+    /**
+     * Provides a compiler configuration that will be used instead of reading the tsconfig.json file from disk.
+     * The object must conform to the TypeScript tsconfig schema:
+     *
+     * http://json.schemastore.org/tsconfig
+     *
+     * If omitted, then the tsconfig.json file will be read from the "projectFolder".
+     *
+     * DEFAULT VALUE: no overrideTsconfig section
+     */
+    // "overrideTsconfig": {
+    //   . . .
+    // }
+    /**
+     * This option causes the compiler to be invoked with the --skipLibCheck option. This option is not recommended
+     * and may cause API Extractor to produce incomplete or incorrect declarations, but it may be required when
+     * dependencies contain declarations that are incompatible with the TypeScript engine that API Extractor uses
+     * for its analysis.  Where possible, the underlying issue should be fixed rather than relying on skipLibCheck.
+     *
+     * DEFAULT VALUE: false
+     */
+    // "skipLibCheck": true,
+  },
+
+  /**
+   * Configures how the API report file (*.api.md) will be generated.
+   */
+  "apiReport": {
+    /**
+     * (REQUIRED) Whether to generate an API report.
+     */
+    "enabled": true,
+
+    /**
+     * The filename for the API report files.  It will be combined with "reportFolder" or "reportTempFolder" to produce
+     * a full file path.
+     *
+     * The file extension should be ".api.md", and the string should not contain a path separator such as "\" or "/".
+     *
+     * SUPPORTED TOKENS: <packageName>, <unscopedPackageName>
+     * DEFAULT VALUE: "<unscopedPackageName>.api.md"
+     */
+    "reportFileName": "react-redux.dt-types.api.md",
+
+    /**
+     * Specifies the folder where the API report file is written.  The file name portion is determined by
+     * the "reportFileName" setting.
+     *
+     * The API report file is normally tracked by Git.  Changes to it can be used to trigger a branch policy,
+     * e.g. for an API review.
+     *
+     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+     * prepend a folder token such as "<projectFolder>".
+     *
+     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+     * DEFAULT VALUE: "<projectFolder>/etc/"
+     */
+    "reportFolder": "<projectFolder>/etc/"
+
+    /**
+     * Specifies the folder where the temporary report file is written.  The file name portion is determined by
+     * the "reportFileName" setting.
+     *
+     * After the temporary file is written to disk, it is compared with the file in the "reportFolder".
+     * If they are different, a production build will fail.
+     *
+     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+     * prepend a folder token such as "<projectFolder>".
+     *
+     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+     * DEFAULT VALUE: "<projectFolder>/temp/"
+     */
+    // "reportTempFolder": "<projectFolder>/temp/"
+  },
+
+  /**
+   * Configures how the doc model file (*.api.json) will be generated.
+   */
+  "docModel": {
+    /**
+     * (REQUIRED) Whether to generate a doc model file.
+     */
+    "enabled": false
+
+    /**
+     * The output path for the doc model file.  The file extension should be ".api.json".
+     *
+     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+     * prepend a folder token such as "<projectFolder>".
+     *
+     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+     * DEFAULT VALUE: "<projectFolder>/temp/<unscopedPackageName>.api.json"
+     */
+    // "apiJsonFilePath": "<projectFolder>/temp/<unscopedPackageName>.api.json"
+  },
+
+  /**
+   * Configures how the .d.ts rollup file will be generated.
+   */
+  "dtsRollup": {
+    /**
+     * (REQUIRED) Whether to generate the .d.ts rollup file.
+     */
+    "enabled": false,
+
+    /**
+     * Specifies the output path for a .d.ts rollup file to be generated without any trimming.
+     * This file will include all declarations that are exported by the main entry point.
+     *
+     * If the path is an empty string, then this file will not be written.
+     *
+     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+     * prepend a folder token such as "<projectFolder>".
+     *
+     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+     * DEFAULT VALUE: "<projectFolder>/dist/<unscopedPackageName>.d.ts"
+     */
+    "untrimmedFilePath": "<projectFolder>/es/typings.d.ts"
+
+    /**
+     * Specifies the output path for a .d.ts rollup file to be generated with trimming for a "beta" release.
+     * This file will include only declarations that are marked as "@public" or "@beta".
+     *
+     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+     * prepend a folder token such as "<projectFolder>".
+     *
+     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+     * DEFAULT VALUE: ""
+     */
+    // "betaTrimmedFilePath": "<projectFolder>/dist/<unscopedPackageName>-beta.d.ts",
+
+    /**
+     * Specifies the output path for a .d.ts rollup file to be generated with trimming for a "public" release.
+     * This file will include only declarations that are marked as "@public".
+     *
+     * If the path is an empty string, then this file will not be written.
+     *
+     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+     * prepend a folder token such as "<projectFolder>".
+     *
+     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+     * DEFAULT VALUE: ""
+     */
+    // "publicTrimmedFilePath": "<projectFolder>/dist/<unscopedPackageName>-public.d.ts",
+
+    /**
+     * When a declaration is trimmed, by default it will be replaced by a code comment such as
+     * "Excluded from this release type: exampleMember".  Set "omitTrimmingComments" to true to remove the
+     * declaration completely.
+     *
+     * DEFAULT VALUE: false
+     */
+    // "omitTrimmingComments": true
+  },
+
+  /**
+   * Configures how the tsdoc-metadata.json file will be generated.
+   */
+  "tsdocMetadata": {
+    /**
+     * Whether to generate the tsdoc-metadata.json file.
+     *
+     * DEFAULT VALUE: true
+     */
+    "enabled": false
+
+    /**
+     * Specifies where the TSDoc metadata file should be written.
+     *
+     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+     * prepend a folder token such as "<projectFolder>".
+     *
+     * The default value is "<lookup>", which causes the path to be automatically inferred from the "tsdocMetadata",
+     * "typings" or "main" fields of the project's package.json.  If none of these fields are set, the lookup
+     * falls back to "tsdoc-metadata.json" in the package folder.
+     *
+     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+     * DEFAULT VALUE: "<lookup>"
+     */
+    // "tsdocMetadataFilePath": "<projectFolder>/dist/tsdoc-metadata.json"
+  },
+
+  /**
+   * Configures how API Extractor reports error and warning messages produced during analysis.
+   *
+   * There are three sources of messages:  compiler messages, API Extractor messages, and TSDoc messages.
+   */
+  "messages": {
+    /**
+     * Configures handling of diagnostic messages reported by the TypeScript compiler engine while analyzing
+     * the input .d.ts files.
+     *
+     * TypeScript message identifiers start with "TS" followed by an integer.  For example: "TS2551"
+     *
+     * DEFAULT VALUE:  A single "default" entry with logLevel=warning.
+     */
+    "compilerMessageReporting": {
+      /**
+       * Configures the default routing for messages that don't match an explicit rule in this table.
+       */
+      "default": {
+        /**
+         * Specifies whether the message should be written to the the tool's output log.  Note that
+         * the "addToApiReportFile" property may supersede this option.
+         *
+         * Possible values: "error", "warning", "none"
+         *
+         * Errors cause the build to fail and return a nonzero exit code.  Warnings cause a production build fail
+         * and return a nonzero exit code.  For a non-production build (e.g. when "api-extractor run" includes
+         * the "--local" option), the warning is displayed but the build will not fail.
+         *
+         * DEFAULT VALUE: "warning"
+         */
+        "logLevel": "warning"
+
+        /**
+         * When addToApiReportFile is true:  If API Extractor is configured to write an API report file (.api.md),
+         * then the message will be written inside that file; otherwise, the message is instead logged according to
+         * the "logLevel" option.
+         *
+         * DEFAULT VALUE: false
+         */
+        // "addToApiReportFile": false
+      }
+
+      // "TS2551": {
+      //   "logLevel": "warning",
+      //   "addToApiReportFile": true
+      // },
+      //
+      // . . .
+    },
+
+    /**
+     * Configures handling of messages reported by API Extractor during its analysis.
+     *
+     * API Extractor message identifiers start with "ae-".  For example: "ae-extra-release-tag"
+     *
+     * DEFAULT VALUE: See api-extractor-defaults.json for the complete table of extractorMessageReporting mappings
+     */
+    "extractorMessageReporting": {
+      "default": {
+        "logLevel": "warning"
+        // "addToApiReportFile": false
+      },
+      "ae-forgotten-export": {
+        "logLevel": "none",
+        "addToApiReportFile": false
+      }
+      //
+      // . . .
+    },
+
+    /**
+     * Configures handling of messages reported by the TSDoc parser when analyzing code comments.
+     *
+     * TSDoc message identifiers start with "tsdoc-".  For example: "tsdoc-link-tag-unescaped-text"
+     *
+     * DEFAULT VALUE:  A single "default" entry with logLevel=warning.
+     */
+    "tsdocMessageReporting": {
+      "default": {
+        "logLevel": "none"
+        // "addToApiReportFile": false
+      }
+
+      // "tsdoc-link-tag-unescaped-text": {
+      //   "logLevel": "warning",
+      //   "addToApiReportFile": true
+      // },
+      //
+      // . . .
+    }
+  }
+}

api-extractor.json

@@ -0,0 +1,356 @@
+/**
+ * Config file for API Extractor.  For more info, please visit: https://api-extractor.com
+ */
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
+
+  /**
+   * Optionally specifies another JSON config file that this file extends from.  This provides a way for
+   * standard settings to be shared across multiple projects.
+   *
+   * If the path starts with "./" or "../", the path is resolved relative to the folder of the file that contains
+   * the "extends" field.  Otherwise, the first path segment is interpreted as an NPM package name, and will be
+   * resolved using NodeJS require().
+   *
+   * SUPPORTED TOKENS: none
+   * DEFAULT VALUE: ""
+   */
+  // "extends": "./shared/api-extractor-base.json"
+  // "extends": "my-package/include/api-extractor-base.json"
+
+  /**
+   * Determines the "<projectFolder>" token that can be used with other config file settings.  The project folder
+   * typically contains the tsconfig.json and package.json config files, but the path is user-defined.
+   *
+   * The path is resolved relative to the folder of the config file that contains the setting.
+   *
+   * The default value for "projectFolder" is the token "<lookup>", which means the folder is determined by traversing
+   * parent folders, starting from the folder containing api-extractor.json, and stopping at the first folder
+   * that contains a tsconfig.json file.  If a tsconfig.json file cannot be found in this way, then an error
+   * will be reported.
+   *
+   * SUPPORTED TOKENS: <lookup>
+   * DEFAULT VALUE: "<lookup>"
+   */
+  "projectFolder": ".",
+
+  /**
+   * (REQUIRED) Specifies the .d.ts file to be used as the starting point for analysis.  API Extractor
+   * analyzes the symbols exported by this module.
+   *
+   * The file extension must be ".d.ts" and not ".ts".
+   *
+   * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+   * prepend a folder token such as "<projectFolder>".
+   *
+   * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+   */
+  "mainEntryPointFilePath": "es/index.d.ts",
+  //"mainEntryPointFilePath": "/home/weber/tmp/rtk-origin-master/dist/index.d.ts",
+
+  /**
+   * A list of NPM package names whose exports should be treated as part of this package.
+   *
+   * For example, suppose that Webpack is used to generate a distributed bundle for the project "library1",
+   * and another NPM package "library2" is embedded in this bundle.  Some types from library2 may become part
+   * of the exported API for library1, but by default API Extractor would generate a .d.ts rollup that explicitly
+   * imports library2.  To avoid this, we can specify:
+   *
+   *   "bundledPackages": [ "library2" ],
+   *
+   * This would direct API Extractor to embed those types directly in the .d.ts rollup, as if they had been
+   * local files for library1.
+   */
+  "bundledPackages": [],
+
+  /**
+   * Determines how the TypeScript compiler engine will be invoked by API Extractor.
+   */
+  "compiler": {
+    /**
+     * Specifies the path to the tsconfig.json file to be used by API Extractor when analyzing the project.
+     *
+     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+     * prepend a folder token such as "<projectFolder>".
+     *
+     * Note: This setting will be ignored if "overrideTsconfig" is used.
+     *
+     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+     * DEFAULT VALUE: "<projectFolder>/tsconfig.json"
+     */
+    // "tsconfigFilePath": "<projectFolder>/tsconfig.json",
+    /**
+     * Provides a compiler configuration that will be used instead of reading the tsconfig.json file from disk.
+     * The object must conform to the TypeScript tsconfig schema:
+     *
+     * http://json.schemastore.org/tsconfig
+     *
+     * If omitted, then the tsconfig.json file will be read from the "projectFolder".
+     *
+     * DEFAULT VALUE: no overrideTsconfig section
+     */
+    // "overrideTsconfig": {
+    //   . . .
+    // }
+    /**
+     * This option causes the compiler to be invoked with the --skipLibCheck option. This option is not recommended
+     * and may cause API Extractor to produce incomplete or incorrect declarations, but it may be required when
+     * dependencies contain declarations that are incompatible with the TypeScript engine that API Extractor uses
+     * for its analysis.  Where possible, the underlying issue should be fixed rather than relying on skipLibCheck.
+     *
+     * DEFAULT VALUE: false
+     */
+    // "skipLibCheck": true,
+  },
+
+  /**
+   * Configures how the API report file (*.api.md) will be generated.
+   */
+  "apiReport": {
+    /**
+     * (REQUIRED) Whether to generate an API report.
+     */
+    "enabled": true,
+
+    /**
+     * The filename for the API report files.  It will be combined with "reportFolder" or "reportTempFolder" to produce
+     * a full file path.
+     *
+     * The file extension should be ".api.md", and the string should not contain a path separator such as "\" or "/".
+     *
+     * SUPPORTED TOKENS: <packageName>, <unscopedPackageName>
+     * DEFAULT VALUE: "<unscopedPackageName>.api.md"
+     */
+    "reportFileName": "react-redux.api.md",
+
+    /**
+     * Specifies the folder where the API report file is written.  The file name portion is determined by
+     * the "reportFileName" setting.
+     *
+     * The API report file is normally tracked by Git.  Changes to it can be used to trigger a branch policy,
+     * e.g. for an API review.
+     *
+     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+     * prepend a folder token such as "<projectFolder>".
+     *
+     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+     * DEFAULT VALUE: "<projectFolder>/etc/"
+     */
+    "reportFolder": "<projectFolder>/etc/"
+
+    /**
+     * Specifies the folder where the temporary report file is written.  The file name portion is determined by
+     * the "reportFileName" setting.
+     *
+     * After the temporary file is written to disk, it is compared with the file in the "reportFolder".
+     * If they are different, a production build will fail.
+     *
+     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+     * prepend a folder token such as "<projectFolder>".
+     *
+     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+     * DEFAULT VALUE: "<projectFolder>/temp/"
+     */
+    // "reportTempFolder": "<projectFolder>/temp/"
+  },
+
+  /**
+   * Configures how the doc model file (*.api.json) will be generated.
+   */
+  "docModel": {
+    /**
+     * (REQUIRED) Whether to generate a doc model file.
+     */
+    "enabled": false
+
+    /**
+     * The output path for the doc model file.  The file extension should be ".api.json".
+     *
+     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+     * prepend a folder token such as "<projectFolder>".
+     *
+     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+     * DEFAULT VALUE: "<projectFolder>/temp/<unscopedPackageName>.api.json"
+     */
+    // "apiJsonFilePath": "<projectFolder>/temp/<unscopedPackageName>.api.json"
+  },
+
+  /**
+   * Configures how the .d.ts rollup file will be generated.
+   */
+  "dtsRollup": {
+    /**
+     * (REQUIRED) Whether to generate the .d.ts rollup file.
+     */
+    "enabled": false,
+
+    /**
+     * Specifies the output path for a .d.ts rollup file to be generated without any trimming.
+     * This file will include all declarations that are exported by the main entry point.
+     *
+     * If the path is an empty string, then this file will not be written.
+     *
+     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+     * prepend a folder token such as "<projectFolder>".
+     *
+     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+     * DEFAULT VALUE: "<projectFolder>/dist/<unscopedPackageName>.d.ts"
+     */
+    "untrimmedFilePath": "<projectFolder>/es/typings.d.ts"
+
+    /**
+     * Specifies the output path for a .d.ts rollup file to be generated with trimming for a "beta" release.
+     * This file will include only declarations that are marked as "@public" or "@beta".
+     *
+     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+     * prepend a folder token such as "<projectFolder>".
+     *
+     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+     * DEFAULT VALUE: ""
+     */
+    // "betaTrimmedFilePath": "<projectFolder>/dist/<unscopedPackageName>-beta.d.ts",
+
+    /**
+     * Specifies the output path for a .d.ts rollup file to be generated with trimming for a "public" release.
+     * This file will include only declarations that are marked as "@public".
+     *
+     * If the path is an empty string, then this file will not be written.
+     *
+     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+     * prepend a folder token such as "<projectFolder>".
+     *
+     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+     * DEFAULT VALUE: ""
+     */
+    // "publicTrimmedFilePath": "<projectFolder>/dist/<unscopedPackageName>-public.d.ts",
+
+    /**
+     * When a declaration is trimmed, by default it will be replaced by a code comment such as
+     * "Excluded from this release type: exampleMember".  Set "omitTrimmingComments" to true to remove the
+     * declaration completely.
+     *
+     * DEFAULT VALUE: false
+     */
+    // "omitTrimmingComments": true
+  },
+
+  /**
+   * Configures how the tsdoc-metadata.json file will be generated.
+   */
+  "tsdocMetadata": {
+    /**
+     * Whether to generate the tsdoc-metadata.json file.
+     *
+     * DEFAULT VALUE: true
+     */
+    "enabled": false
+
+    /**
+     * Specifies where the TSDoc metadata file should be written.
+     *
+     * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+     * prepend a folder token such as "<projectFolder>".
+     *
+     * The default value is "<lookup>", which causes the path to be automatically inferred from the "tsdocMetadata",
+     * "typings" or "main" fields of the project's package.json.  If none of these fields are set, the lookup
+     * falls back to "tsdoc-metadata.json" in the package folder.
+     *
+     * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+     * DEFAULT VALUE: "<lookup>"
+     */
+    // "tsdocMetadataFilePath": "<projectFolder>/dist/tsdoc-metadata.json"
+  },
+
+  /**
+   * Configures how API Extractor reports error and warning messages produced during analysis.
+   *
+   * There are three sources of messages:  compiler messages, API Extractor messages, and TSDoc messages.
+   */
+  "messages": {
+    /**
+     * Configures handling of diagnostic messages reported by the TypeScript compiler engine while analyzing
+     * the input .d.ts files.
+     *
+     * TypeScript message identifiers start with "TS" followed by an integer.  For example: "TS2551"
+     *
+     * DEFAULT VALUE:  A single "default" entry with logLevel=warning.
+     */
+    "compilerMessageReporting": {
+      /**
+       * Configures the default routing for messages that don't match an explicit rule in this table.
+       */
+      "default": {
+        /**
+         * Specifies whether the message should be written to the the tool's output log.  Note that
+         * the "addToApiReportFile" property may supersede this option.
+         *
+         * Possible values: "error", "warning", "none"
+         *
+         * Errors cause the build to fail and return a nonzero exit code.  Warnings cause a production build fail
+         * and return a nonzero exit code.  For a non-production build (e.g. when "api-extractor run" includes
+         * the "--local" option), the warning is displayed but the build will not fail.
+         *
+         * DEFAULT VALUE: "warning"
+         */
+        "logLevel": "warning"
+
+        /**
+         * When addToApiReportFile is true:  If API Extractor is configured to write an API report file (.api.md),
+         * then the message will be written inside that file; otherwise, the message is instead logged according to
+         * the "logLevel" option.
+         *
+         * DEFAULT VALUE: false
+         */
+        // "addToApiReportFile": false
+      }
+
+      // "TS2551": {
+      //   "logLevel": "warning",
+      //   "addToApiReportFile": true
+      // },
+      //
+      // . . .
+    },
+
+    /**
+     * Configures handling of messages reported by API Extractor during its analysis.
+     *
+     * API Extractor message identifiers start with "ae-".  For example: "ae-extra-release-tag"
+     *
+     * DEFAULT VALUE: See api-extractor-defaults.json for the complete table of extractorMessageReporting mappings
+     */
+    "extractorMessageReporting": {
+      "default": {
+        "logLevel": "warning"
+        // "addToApiReportFile": false
+      },
+      "ae-forgotten-export": {
+        "logLevel": "none",
+        "addToApiReportFile": false
+      }
+      //
+      // . . .
+    },
+
+    /**
+     * Configures handling of messages reported by the TSDoc parser when analyzing code comments.
+     *
+     * TSDoc message identifiers start with "tsdoc-".  For example: "tsdoc-link-tag-unescaped-text"
+     *
+     * DEFAULT VALUE:  A single "default" entry with logLevel=warning.
+     */
+    "tsdocMessageReporting": {
+      "default": {
+        "logLevel": "none"
+        // "addToApiReportFile": false
+      }
+
+      // "tsdoc-link-tag-unescaped-text": {
+      //   "logLevel": "warning",
+      //   "addToApiReportFile": true
+      // },
+      //
+      // . . .
+    }
+  }
+}

codecov.yml

@@ -1 +1,7 @@
-comment: false
+comment: off
+coverage:
+  status:
+    project:
+      default:
+        threshold: 5%
+    patch: off

docs/api/Provider.md

@@ -3,56 +3,74 @@ id: provider
 title: Provider
 sidebar_label: Provider
 hide_title: true
+description: 'API > Provider: providing the Redux store to your React app'
 ---
 
+ 
+
 # `Provider`
 
 ## Overview
 
-The `<Provider />` makes the Redux `store` available to any nested components that have been wrapped in the `connect()` function.
+The `<Provider>` component makes the Redux `store` available to any nested components that need to access the Redux store.
 
-Since any React component in a React Redux app can be connected, most applications will render a `<Provider>` at the top level, with the entire app’s component tree inside of it.
+Since any React component in a React Redux app can be connected to the store, most applications will render a `<Provider>` at the top level, with the entire app’s component tree inside of it.
 
-Normally, you can’t use a connected component unless it is nested inside of a `<Provider>`.
+The [Hooks](./hooks.md) and [`connect`](./connect.md) APIs can then access the provided store instance via React's Context mechanism.
 
 ### Props
 
-`store` ([Redux Store](https://redux.js.org/api/store))
-The single Redux `store` in your application.
+```ts
+interface ProviderProps<A extends Action = AnyAction, S = any> {
+  /**
+   * The single Redux store in your application.
+   */
+  store: Store<S, A>
+
+  /**
+   * An optional server state snapshot. Will be used during initial hydration render
+   * if available, to ensure that the UI output is consistent with the HTML generated on the server.
+   * New in 8.0
+   */
+  serverState?: S
+
+  /**
+   * Optional context to be used internally in react-redux. Use React.createContext()
+   * to create a context to be used.
+   * If this is used, you'll need to customize `connect` by supplying the same
+   * context provided to the Provider.
+   * Set the initial value to null, and the hooks will error
+   * if this is not overwritten by Provider.
+   */
+  context?: Context<ReactReduxContextValue<S, A> | null>
+
+  /** Global configuration for the `useSelector` stability check */
+  stabilityCheck?: StabilityCheck
+
+  /** The top-level React elements in your component tree, such as `<App />` **/
+  children: ReactNode
+}
+```
 
-`children` (ReactElement)
-The root of your component hierarchy.
+Typically, you only need to pass `<Provider store={store}>`.
 
-`context`
-You may provide a context instance. If you do so, you will need to provide the same context instance to all of your connected components as well. Failure to provide the correct context results in runtime error:
+You may provide a context instance. If you do so, you will need to provide the same context instance to all of your connected components as well. Failure to provide the correct context results in this runtime error:
 
 > Invariant Violation
 >
 > Could not find "store" in the context of "Connect(MyComponent)". Either wrap the root component in a `<Provider>`, or pass a custom React context provider to `<Provider>` and the corresponding React context consumer to Connect(Todo) in connect options.
 
-**Note:** You do not need to provide custom context in order to access the store.
-React Redux exports the context instance it uses by default so that you can access the store by:
-
-```js
-import { ReactReduxContext } from 'react-redux'
-
-// in your connected component
-render() {
-  return (
-    <ReactReduxContext.Consumer>
-      {({ store }) => {
-        // do something with the store here
-      }}
-    </ReactReduxContext.Consumer>
-  )
-}
-```
+## React 18 SSR Usage
 
-### Example Usage
+As of React-Redux v8, `<Provider>` now accepts a `serverState` prop for use in SSR hydration scenarios. This is necessary if you are calling `hydrateRoot` in order to avoid hydration mismatches.
 
-In the example below, the `<App />` component is our root-level component. This means it’s at the very top of our component hierarchy.
+You should pass the entire serialized state from the server as the `serverState` prop, and React will use this state for the initial hydration render. After that, it will apply any updates from changes that occurred on the client during the setup process.
+
+## Examples
 
-**Vanilla React Example**
+### Basic Usage
+
+In the example below, the `<App />` component is our root-level component. This means it’s at the very top of our component hierarchy.
 
 ```jsx
 import React from 'react'
@@ -64,37 +82,35 @@ import createStore from './createReduxStore'
 
 const store = createStore()
 
-ReactDOM.render(
+// As of React 18
+const root = ReactDOM.createRoot(document.getElementById('root'))
+root.render(
   <Provider store={store}>
     <App />
   </Provider>,
-  document.getElementById('root')
 )
 ```
 
-**Usage with React Router**
+### React 18 SSR Hydration
 
-```jsx
-import React from 'react'
-import ReactDOM from 'react-dom'
+In this example, the client has received HTML rendered by the server, as well as a serialized Redux state attached to `window`. The serialized state is used to both pre-fill the store's contents, _and_ passed as the `serverState` prop to `<Provider>`
+
+```tsx title="src/index.ts"
+import { hydrateRoot } from 'react-dom/client'
+import { configureStore } from '@reduxjs/toolkit'
 import { Provider } from 'react-redux'
-import { Router, Route } from 'react-router-dom'
 
-import { App } from './App'
-import { Foo } from './Foo'
-import { Bar } from './Bar'
-import createStore from './createReduxStore'
+const preloadedState = window.__PRELOADED_STATE__
 
-const store = createStore()
+const clientStore = configureStore({
+  reducer: rootReducer,
+  preloadedState,
+})
 
-ReactDOM.render(
-  <Provider store={store}>
-    <Router history={history}>
-      <Route exact path="/" component={App} />
-      <Route path="/foo" component={Foo} />
-      <Route path="/bar" component={Bar} />
-    </Router>
+hydrateRoot(
+  document.getElementById('root'),
+  <Provider store={clientStore} serverState={preloadedState}>
+    <App />
   </Provider>,
-  document.getElementById('root')
 )
 ```

docs/api/batch.md

@@ -0,0 +1,46 @@
+---
+id: batch
+title: batch
+sidebar_label: batch()
+hide_title: true
+description: 'API > batch: batching React rendering updates'
+---
+
+ 
+
+# `batch()`
+
+```js
+batch((fn: () => void))
+```
+
+_added in v7.0.0_
+
+:::info
+
+**If you're using React 18, you do not need to use the `batch` API**. React 18 automatically batches _all_ state updates, no matter where they're queued.
+
+:::
+
+React's `unstable_batchedUpdates()` API allows any React updates in an event loop tick to be batched together into a single render pass. React already uses this internally for its own event handler callbacks. This API is actually part of the renderer packages like ReactDOM and React Native, not the React core itself.
+
+Since React-Redux needs to work in both ReactDOM and React Native environments, we've taken care of importing this API from the correct renderer at build time for our own use. We also now re-export this function publicly ourselves, renamed to `batch()`. You can use it to ensure that multiple actions dispatched outside of React only result in a single render update, like this:
+
+```ts
+import { batch } from 'react-redux'
+
+function myThunk() {
+  return (dispatch, getState) => {
+    // should only result in one combined re-render, not two
+    batch(() => {
+      dispatch(increment())
+      dispatch(increment())
+    })
+  }
+}
+```
+
+## References
+
+- [`unstable_batchedUpdates()` API from React](https://github.com/facebook/react/commit/b41883fc708cd24d77dcaa767cde814b50b457fe)
+- [React 18 Working Group: Automatic Batching for Fewer Renders in React 18](https://github.com/reactwg/react-18/discussions/21)

docs/introduction/getting-started.md

@@ -0,0 +1,150 @@
+---
+id: getting-started
+title: Getting Started with React Redux
+hide_title: true
+sidebar_label: Getting Started
+description: 'Introduction > Getting Started: First steps with React Redux'
+---
+
+ 
+
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
+import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css'
+
+# Getting Started with React Redux
+
+[React Redux](https://github.com/reduxjs/react-redux) is the official [React](https://react.dev/) UI bindings layer for [Redux](https://redux.js.org/). It lets your React components read data from a Redux store, and dispatch actions to the store to update state.
+
+## Installation
+
+React Redux 8.x requires **React 16.8.3 or later** / **React Native 0.59 or later**, in order to make use of React Hooks.
+
+### Create a React Redux App
+
+The recommended way to start new apps with React and Redux is by using [our official Redux+TS template for Vite](https://github.com/reduxjs/redux-templates), or by creating a new Next.js project using [Next's `with-redux` template](https://github.com/vercel/next.js/tree/canary/examples/with-redux).
+
+Both of these already have Redux Toolkit and React-Redux configured appropriately for that build tool, and come with a small example app that demonstrates how to use several of Redux Toolkit's features.
+
+```bash
+# Vite with our Redux+TS template
+# (using the `degit` tool to clone and extract the template)
+npx degit reduxjs/redux-templates/packages/vite-template-redux my-app
+
+# Next.js using the `with-redux` template
+npx create-next-app --example with-redux my-app
+```
+
+We do not currently have official React Native templates, but recommend these templates for standard React Native and for Expo:
+
+- https://github.com/rahsheen/react-native-template-redux-typescript
+- https://github.com/rahsheen/expo-template-redux-typescript
+
+### An Existing React App
+
+To use React Redux with your React app, install it as a dependency:
+
+```bash
+# If you use npm:
+npm install react-redux
+
+# Or if you use Yarn:
+yarn add react-redux
+```
+
+You'll also need to [install Redux](https://redux.js.org/introduction/installation) and [set up a Redux store](https://redux.js.org/recipes/configuring-your-store/) in your app.
+
+React-Redux v8 is written in TypeScript, so all types are automatically included.
+
+## API Overview
+
+### `Provider`
+
+React Redux includes a `<Provider />` component, which makes the Redux store available to the rest of your app:
+
+```jsx
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+
+import { Provider } from 'react-redux'
+import store from './store'
+
+import App from './App'
+
+// As of React 18
+const root = ReactDOM.createRoot(document.getElementById('root'))
+root.render(
+  <Provider store={store}>
+    <App />
+  </Provider>,
+)
+```
+
+### Hooks
+
+React Redux provides a pair of custom React hooks that allow your React components to interact with the Redux store.
+
+`useSelector` reads a value from the store state and subscribes to updates, while `useDispatch` returns the store's `dispatch` method to let you dispatch actions.
+
+```jsx
+import React from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+import {
+  decrement,
+  increment,
+  incrementByAmount,
+  incrementAsync,
+  selectCount,
+} from './counterSlice'
+import styles from './Counter.module.css'
+
+export function Counter() {
+  const count = useSelector(selectCount)
+  const dispatch = useDispatch()
+
+  return (
+    <div>
+      <div className={styles.row}>
+        <button
+          className={styles.button}
+          aria-label="Increment value"
+          onClick={() => dispatch(increment())}
+        >
+          +
+        </button>
+        <span className={styles.value}>{count}</span>
+        <button
+          className={styles.button}
+          aria-label="Decrement value"
+          onClick={() => dispatch(decrement())}
+        >
+          -
+        </button>
+      </div>
+      {/* omit additional rendering output here */}
+    </div>
+  )
+}
+```
+
+## Learning React Redux
+
+### Learn Modern Redux Livestream
+
+Redux maintainer Mark Erikson appeared on the "Learn with Jason" show to explain how we recommend using Redux today. The show includes a live-coded example app that shows how to use Redux Toolkit and React-Redux hooks with Typescript, as well as the new RTK Query data fetching APIs.
+
+See [the "Learn Modern Redux" show notes page](https://www.learnwithjason.dev/let-s-learn-modern-redux) for a transcript and links to the example app source.
+
+<LiteYouTubeEmbed 
+    id="9zySeP5vH9c"
+    title="Learn Modern Redux - Redux Toolkit, React-Redux Hooks, and RTK Query"
+/>
+
+## Help and Discussion
+
+The **[#redux channel](https://discord.gg/0ZcbPKXt5bZ6au5t)** of the **[Reactiflux Discord community](http://www.reactiflux.com)** is our official resource for all questions related to learning and using Redux. Reactiflux is a great place to hang out, ask questions, and learn - come join us!
+
+You can also ask questions on [Stack Overflow](https://stackoverflow.com) using the **[#redux tag](https://stackoverflow.com/questions/tagged/redux)**.
+
+## Docs Translations
+
+- [Portuguese](https://fernandobelotto.github.io/react-redux)

docs/introduction/why-use-react-redux.md

@@ -3,8 +3,11 @@ id: why-use-react-redux
 title: Why Use React Redux?
 hide_title: true
 sidebar_label: Why Use React Redux?
+description: 'Introduction > Why Use React Redux: benefits of using React Redux in a React app'
 ---
 
+ 
+
 # Why Use React Redux?
 
 Redux itself is a standalone library that can be used with any UI layer or framework, including React, Angular, Vue, Ember, and vanilla JS. Although Redux and React are commonly used together, they are independent of each other.
@@ -15,12 +18,16 @@ If you are using Redux with any kind of UI framework, you will normally use a "U
 
 To understand why you should use React Redux, it may help to understand what a "UI binding library" does.
 
-> **Note**: If you have questions about whether you should use Redux in general, please see these articles for discussion of when and why you might want to use Redux, and how it's intended to be used:
->
-> - [Redux docs: Motivation](https://redux.js.org/introduction/motivation)
-> - [Redux docs: FAQ - When should I use Redux?](https://redux.js.org/faq/general#when-should-i-use-redux)
-> - [You Might Not Need Redux](https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367)
-> - [Idiomatic Redux: The Tao of Redux, Part 1 - Implementation and Intent](https://blog.isquaredsoftware.com/2017/05/idiomatic-redux-tao-of-redux-part-1/)
+:::info
+
+If you have questions about whether you should use Redux in general, please see these articles for discussion of when and why you might want to use Redux, and how it's intended to be used:
+
+- [Redux docs: Motivation](https://redux.js.org/introduction/motivation)
+- [Redux docs: FAQ - When should I use Redux?](https://redux.js.org/faq/general#when-should-i-use-redux)
+- [You Might Not Need Redux](https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367)
+- [Idiomatic Redux: The Tao of Redux, Part 1 - Implementation and Intent](https://blog.isquaredsoftware.com/2017/05/idiomatic-redux-tao-of-redux-part-1/)
+
+:::
 
 ## Integrating Redux with a UI
 
@@ -39,25 +46,19 @@ While it is possible to write this logic by hand, doing so would become very rep
 
 The process of subscribing to the store, checking for updated data, and triggering a re-render can be made more generic and reusable. **A UI binding library like React Redux handles the store interaction logic, so you don't have to write that code yourself.**
 
-> **Note**: For a deeper look at how React Redux works internally and how it handles the store interaction for you, see **[Idiomatic Redux: The History and Implementation of React Redux](https://blog.isquaredsoftware.com/2018/11/react-redux-history-implementation/)**.
+:::info
+
+For a deeper look at how React Redux works internally and how it handles the store interaction for you, see **[Idiomatic Redux: The History and Implementation of React Redux](https://blog.isquaredsoftware.com/2018/11/react-redux-history-implementation/)**.
+
+:::
 
 ## Reasons to Use React Redux
 
 ### It is the Official Redux UI Bindings for React
 
 While Redux can be used with any UI layer, it was originally designed and intended for use with React. There are [UI binding layers for many other frameworks](https://redux.js.org/introduction/ecosystem#library-integration-and-bindings), but React Redux is maintained directly by the Redux team.
 
-As the offical Redux binding for React, React Redux is kept up-to-date with any API changes from either library, to ensure that your React components behave as expected. Its intended usage adopts the design principles of React - writing declarative components.
-
-### It Encourages Good React Architecture
-
-React components are a lot like functions. While it's possible to write all your code in a single function, it's usually better to split that logic into smaller functions that each handle a specific task, making them easier to understand.
-
-Similarly, while you can write large React components that handle many different tasks, it's usually better to split up components based on responsibilities. In particular, it is common to have "container" components that are responsible for collecting and managing some kind of data, and "presentational" components that simply display UI based on whatever data they've received as props.
-
-**The React Redux `connect` function generates "container" wrapper components that handle the process of interacting with the store for you**. That way, your own components can focus on other tasks, whether it be collecting other data, or just displaying a piece of the UI. In addition, **`connect` abstracts away the question of _which_ store is being used, making your own components more reusable**.
-
-As a general architectural principle, **we want to keep our own components "unaware" of Redux**. They should simply receive data and functions as props, just like any other React component. This ultimately makes it easier to test and reuse your own components.
+As the official Redux binding for React, React Redux is kept up-to-date with any API changes from either library, to ensure that your React components behave as expected. Its intended usage adopts the design principles of React - writing declarative components.
 
 ### It Implements Performance Optimizations For You
 
@@ -83,8 +84,8 @@ As the official binding library for React and Redux, React Redux has a large com
 
 ### Community Resources
 
-- Discord channel: [#redux on Reactiflux](https://gist.github.com/gaearon/1d19088790e70ac32ea636c025ba424e) ([Reactiflux invite link](https://reactiflux.com))
+- Discord channel: [#redux on Reactiflux](https://discord.gg/0ZcbPKXt5bZ6au5t) ([Reactiflux invite link](https://reactiflux.com))
 - Stack Overflow topics: [Redux](https://stackoverflow.com/questions/tagged/redux), [React Redux](https://stackoverflow.com/questions/tagged/redux)
 - Reddit: [/r/reactjs](https://www.reddit.com/r/reactjs/), [/r/reduxjs](https://www.reddit.com/r/reduxjs/)
-- Github issues (bug reports and feature requests): https://github.com/reduxjs/react-redux/issues
-- Tutorials, articles, and further resources: [React/Redux Links](https://www.reddit.com/r/reduxjs/)
+- GitHub issues (bug reports and feature requests): https://github.com/reduxjs/react-redux/issues
+- Tutorials, articles, and further resources: [React/Redux Links](https://github.com/markerikson/react-redux-links)

docs/troubleshooting.md

@@ -5,90 +5,57 @@ sidebar_label: Troubleshooting
 hide_title: true
 ---
 
-## Troubleshooting
-
-Make sure to check out [Troubleshooting Redux](http://redux.js.org/docs/Troubleshooting.html) first.
+ 
 
-### I'm getting the following alert: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.
+## Troubleshooting
 
-This warning is shown when using react 15.5.\*. Basically, now it's just a warning, but in react16 the application might break. the PropTypes should now be imported from 'prop-types' package, and not from the react package.
+The **[#redux channel](https://discord.gg/0ZcbPKXt5bZ6au5t)** of the **[Reactiflux Discord community](http://www.reactiflux.com)** is our official resource for all questions related to learning and using Redux. Reactiflux is a great place to hang out, ask questions, and learn - come join us!
 
-Update to the latest version of react-redux.
+You can also ask questions on [Stack Overflow](https://stackoverflow.com) using the **[#redux tag](https://stackoverflow.com/questions/tagged/redux)**.
 
 ### My views aren’t updating!
 
-See the link above.
 In short,
 
 - Reducers should never mutate state, they must return new objects, or React Redux won’t see the updates.
-- Make sure you either bind action creators with the `mapDispatchToProps` argument to `connect()` or with the `bindActionCreators()` method, or that you manually call `dispatch()`. Just calling your `MyActionCreators.addTodo()` function won’t work because it just _returns_ an action, but does not _dispatch_ it.
-
-### My views aren’t updating on route change with React Router 0.13
+- Make sure you are actually _dispatching_ actions. For example, if you have an action creator like `addTodo`, just calling the imported `addTodo()` function by itself won't do anything because it just _returns_ an action, but does not _dispatch_ it. You either need to call `dispatch(addTodo())` (if using the hooks API) or `props.addTodo()` (if using `connect` + `mapDispatch`).
 
-If you’re using React Router 0.13, you might [bump into this problem](https://github.com/reduxjs/react-redux/issues/43). The solution is simple: whenever you use `<RouteHandler>` or the `Handler` provided by `Router.run`, pass the router state to it.
-
-Root view:
+### Could not find "store" in either the context or props
 
-```jsx
-Router.run(routes, Router.HistoryLocation, (Handler, routerState) => {
-  // note "routerState" here
-  ReactDOM.render(
-    <Provider store={store}>
-      {/* note "routerState" here */}
-      <Handler routerState={routerState} />
-    </Provider>,
-    document.getElementById('root')
-  )
-})
-```
+If you have context issues,
 
-Nested view:
+1. [Make sure you don’t have a duplicate instance of React](https://medium.com/@dan_abramov/two-weird-tricks-that-fix-react-7cf9bbdef375) on the page.
+2. Make sure you don't have multiple instances/copies of React Redux in your project.
+3. Make sure you didn’t forget to wrap your root or some other ancestor component in [`<Provider>`](#provider-store).
+4. Make sure you’re running the latest versions of React and React Redux.
 
-```js
-render() {
-  // Keep passing it down
-  return <RouteHandler routerState={this.props.routerState} />
-}
-```
+### Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you’re trying to add a ref to a component that doesn’t have an owner
 
-Conveniently, this gives your components access to the router state!
-You can also upgrade to React Router 1.0 which shouldn’t have this problem. (Let us know if it does!)
+If you’re using React for web, this usually means you have a [duplicate React](https://medium.com/@dan_abramov/two-weird-tricks-that-fix-react-7cf9bbdef375). Follow the linked instructions to fix this.
 
-### My views aren’t updating when something changes outside of Redux
+### I'm getting a warning about useLayoutEffect in my unit tests
 
-If your views depend on global state or [React “context”](http://facebook.github.io/react/docs/context.html), you might find that views decorated with `connect()` will fail to update.
+ReactDOM emits this warning if `useLayoutEffect` is used "on the server". React Redux tries to get around the issue by detecting whether it is running within a browser context. Jest, by default, defines enough of the browser environment that React Redux thinks it's running in a browser, causing these warnings.
 
-> This is because `connect()` implements [shouldComponentUpdate](https://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate) by default, assuming that your component will produce the same results given the same props and state. This is a similar concept to React’s [PureRenderMixin](https://facebook.github.io/react/docs/pure-render-mixin.html).
+You can prevent the warning by setting the `@jest-environment` for a single test file:
 
-The _best_ solution to this is to make sure that your components are pure and pass any external state to them via props. This will ensure that your views do not re-render unless they actually need to re-render and will greatly speed up your application.
+```jsx
+// my.test.jsx
+/**
+ * @jest-environment node
+ */
+```
 
-If that’s not practical for whatever reason (for example, if you’re using a library that depends heavily on React context), you may pass the `pure: false` option to `connect()`:
+Or by setting it globally:
 
 ```js
-function mapStateToProps(state) {
-  return { todos: state.todos }
-}
-
-export default connect(
-  mapStateToProps,
-  null,
-  null,
-  {
-    pure: false
+// package.json
+{
+  "name": "my-project",
+  "jest": {
+    "testEnvironment": "node"
   }
-)(TodoApp)
+}
 ```
 
-This will remove the assumption that `TodoApp` is pure and cause it to update whenever its parent component renders. Note that this will make your application less performant, so only do this if you have no other option.
-
-### Could not find "store" in either the context or props
-
-If you have context issues,
-
-1. [Make sure you don’t have a duplicate instance of React](https://medium.com/@dan_abramov/two-weird-tricks-that-fix-react-7cf9bbdef375) on the page.
-2. Make sure you didn’t forget to wrap your root or some other ancestor component in [`<Provider>`](#provider-store).
-3. Make sure you’re running the latest versions of React and React Redux.
-
-### Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you’re trying to add a ref to a component that doesn’t have an owner
-
-If you’re using React for web, this usually means you have a [duplicate React](https://medium.com/@dan_abramov/two-weird-tricks-that-fix-react-7cf9bbdef375). Follow the linked instructions to fix this.
+See https://github.com/facebook/react/issues/14927#issuecomment-490426131

docs/tutorials/quick-start.md

@@ -0,0 +1,222 @@
+---
+id: quick-start
+title: Quick Start
+sidebar_label: Quick Start
+hide_title: true
+---
+
+ 
+
+# React Redux Quick Start
+
+:::tip What You'll Learn
+
+- How to set up and use Redux Toolkit with React Redux
+
+:::
+
+:::info Prerequisites
+
+- Familiarity with [ES6 syntax and features](https://www.taniarascia.com/es6-syntax-and-feature-overview/)
+- Knowledge of React terminology: [JSX](https://react.dev/learn/writing-markup-with-jsx), [State](https://react.dev/learn/state-a-components-memory), [Function Components, Props](https://react.dev/learn/passing-props-to-a-component), and [Hooks](https://react.dev/reference/react#)
+- Understanding of [Redux terms and concepts](https://redux.js.org/tutorials/fundamentals/part-2-concepts-data-flow)
+
+:::
+
+## Introduction
+
+Welcome to the React Redux Quick Start tutorial! **This tutorial will briefly introduce you to React Redux and teach you how to start using it correctly**.
+
+### How to Read This Tutorial
+
+This page will focus on just how to set up a Redux application with Redux Toolkit and the main APIs you'll use. For explanations of what Redux is, how it works, and full examples of how to use Redux Toolkit, see [the Redux core docs tutorials](https://redux.js.org/tutorials/index).
+
+For this tutorial, we assume that you're using Redux Toolkit and React Redux together, as that is the standard Redux usage pattern. The examples are based on [a typical Create-React-App folder structure](https://create-react-app.dev/docs/folder-structure) where all the application code is in a `src`, but the patterns can be adapted to whatever project or folder setup you're using.
+
+The [Redux+JS template for Create-React-App](https://github.com/reduxjs/cra-template-redux) comes with this same project setup already configured.
+
+## Usage Summary
+
+### Install Redux Toolkit and React Redux
+
+Add the Redux Toolkit and React Redux packages to your project:
+
+```sh
+npm install @reduxjs/toolkit react-redux
+```
+
+### Create a Redux Store
+
+Create a file named `src/app/store.js`. Import the `configureStore` API from Redux Toolkit. We'll start by creating an empty Redux store, and exporting it:
+
+```js title="app/store.js"
+import { configureStore } from '@reduxjs/toolkit'
+
+export default configureStore({
+  reducer: {},
+})
+```
+
+This creates a Redux store, and also automatically configure the Redux DevTools extension so that you can inspect the store while developing.
+
+### Provide the Redux Store to React
+
+Once the store is created, we can make it available to our React components by putting a React Redux `<Provider>` around our application in `src/index.js`. Import the Redux store we just created, put a `<Provider>` around your `<App>`, and pass the store as a prop:
+
+```js title="index.js"
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import './index.css'
+import App from './App'
+// highlight-start
+import store from './app/store'
+import { Provider } from 'react-redux'
+// highlight-end
+
+// As of React 18
+const root = ReactDOM.createRoot(document.getElementById('root'))
+
+root.render(
+  // highlight-next-line
+  <Provider store={store}>
+    <App />
+  </Provider>,
+)
+```
+
+### Create a Redux State Slice
+
+Add a new file named `src/features/counter/counterSlice.js`. In that file, import the `createSlice` API from Redux Toolkit.
+
+Creating a slice requires a string name to identify the slice, an initial state value, and one or more reducer functions to define how the state can be updated. Once a slice is created, we can export the generated Redux action creators and the reducer function for the whole slice.
+
+Redux requires that [we write all state updates immutably, by making copies of data and updating the copies](https://redux.js.org/tutorials/fundamentals/part-2-concepts-data-flow#immutability). However, Redux Toolkit's `createSlice` and `createReducer` APIs use [Immer](https://immerjs.github.io/immer/) inside to allow us to [write "mutating" update logic that becomes correct immutable updates](https://redux.js.org/tutorials/fundamentals/part-8-modern-redux#immutable-updates-with-immer).
+
+```js title="features/counter/counterSlice.js"
+import { createSlice } from '@reduxjs/toolkit'
+
+export const counterSlice = createSlice({
+  name: 'counter',
+  initialState: {
+    value: 0,
+  },
+  reducers: {
+    increment: (state) => {
+      // Redux Toolkit allows us to write "mutating" logic in reducers. It
+      // doesn't actually mutate the state because it uses the Immer library,
+      // which detects changes to a "draft state" and produces a brand new
+      // immutable state based off those changes.
+      // Also, no return statement is required from these functions.
+      state.value += 1
+    },
+    decrement: (state) => {
+      state.value -= 1
+    },
+    incrementByAmount: (state, action) => {
+      state.value += action.payload
+    },
+  },
+})
+
+// Action creators are generated for each case reducer function
+export const { increment, decrement, incrementByAmount } = counterSlice.actions
+
+export default counterSlice.reducer
+```
+
+### Add Slice Reducers to the Store
+
+Next, we need to import the reducer function from the counter slice and add it to our store. By defining a field inside the `reducer` parameter, we tell the store to use this slice reducer function to handle all updates to that state.
+
+```js title="app/store.js"
+import { configureStore } from '@reduxjs/toolkit'
+// highlight-next-line
+import counterReducer from '../features/counter/counterSlice'
+
+export default configureStore({
+  reducer: {
+    // highlight-next-line
+    counter: counterReducer,
+  },
+})
+```
+
+### Use Redux State and Actions in React Components
+
+Now we can use the React Redux hooks to let React components interact with the Redux store. We can read data from the store with `useSelector`, and dispatch actions using `useDispatch`. Create a `src/features/counter/Counter.js` file with a `<Counter>` component inside, then import that component into `App.js` and render it inside of `<App>`.
+
+```jsx title="features/counter/Counter.js"
+import React from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+import { decrement, increment } from './counterSlice'
+import styles from './Counter.module.css'
+
+export function Counter() {
+  const count = useSelector((state) => state.counter.value)
+  const dispatch = useDispatch()
+
+  return (
+    <div>
+      <div>
+        <button
+          aria-label="Increment value"
+          onClick={() => dispatch(increment())}
+        >
+          Increment
+        </button>
+        <span>{count}</span>
+        <button
+          aria-label="Decrement value"
+          onClick={() => dispatch(decrement())}
+        >
+          Decrement
+        </button>
+      </div>
+    </div>
+  )
+}
+```
+
+Now, any time you click the "Increment" and "Decrement buttons:
+
+- The corresponding Redux action will be dispatched to the store
+- The counter slice reducer will see the actions and update its state
+- The `<Counter>` component will see the new state value from the store and re-render itself with the new data
+
+## What You've Learned
+
+That was a brief overview of how to set up and use Redux Toolkit with React. Recapping the details:
+
+:::tip Summary
+
+- **Create a Redux store with `configureStore`**
+  - `configureStore` accepts a `reducer` function as a named argument
+  - `configureStore` automatically sets up the store with good default settings
+- **Provide the Redux store to the React application components**
+  - Put a React Redux `<Provider>` component around your `<App />`
+  - Pass the Redux store as `<Provider store={store}>`
+- **Create a Redux "slice" reducer with `createSlice`**
+  - Call `createSlice` with a string name, an initial state, and named reducer functions
+  - Reducer functions may "mutate" the state using Immer
+  - Export the generated slice reducer and action creators
+- **Use the React Redux `useSelector/useDispatch` hooks in React components**
+  - Read data from the store with the `useSelector` hook
+  - Get the `dispatch` function with the `useDispatch` hook, and dispatch actions as needed
+
+:::
+
+### Full Counter App Example
+
+Here's the complete Counter application as a running CodeSandbox:
+
+<iframe
+  class="codesandbox"
+  src="https://codesandbox.io/embed/github/reduxjs/redux-essentials-counter-example/tree/master/?fontsize=14&hidenavigation=1&module=%2Fsrc%2Ffeatures%2Fcounter%2FcounterSlice.js&theme=dark&runonclick=1"
+  title="redux-essentials-example"
+  allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
+  sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+></iframe>
+
+## What's Next?
+
+We recommend going through [**the "Redux Essentials" and "Redux Fundamentals" tutorials in the Redux core docs**](https://redux.js.org/tutorials/index), which will give you a complete understanding of how Redux works, what Redux Toolkit and React Redux do, and how to use it correctly.

docs/tutorials/typescript.md

@@ -0,0 +1,182 @@
+---
+id: typescript-quick-start
+title: TypeScript Quick Start
+sidebar_label: TypeScript Quick Start
+hide_title: true
+---
+
+ 
+
+# React Redux TypeScript Quick Start
+
+:::tip What You'll Learn
+
+- How to set up and use Redux Toolkit and React Redux with TypeScript
+
+:::
+
+:::info Prerequisites
+
+- Knowledge of React [Hooks](https://react.dev/reference/react#)
+- Understanding of [Redux terms and concepts](https://redux.js.org/tutorials/fundamentals/part-2-concepts-data-flow)
+- Understanding of TypeScript syntax and concepts
+
+:::
+
+## Introduction
+
+Welcome to the React Redux TypeScript Quick Start tutorial! **This tutorial will briefly show how to use TypeScript with Redux Toolkit and React-Redux**.
+
+This page focuses on just how to set up the TypeScript aspects. For explanations of what Redux is, how it works, and full examples of how to use Redux, see [the Redux core docs tutorials](https://redux.js.org/tutorials/index).
+
+[React Redux](/) is also written in TypeScript as of version 8, and also includes its own type definitions.
+
+The [Redux+TS template for Create-React-App](https://github.com/reduxjs/cra-template-redux-typescript) comes with a working example of these patterns already configured.
+
+:::info
+
+The recently updated `@types/react@18` major version has changed component definitions to remove having `children` as a prop by default. This causes errors if you have multiple copies of `@types/react` in your project. To fix this, tell your package manager to resolve `@types/react` to a single version. Details:
+
+https://github.com/facebook/react/issues/24304#issuecomment-1094565891
+
+:::
+
+## Project Setup
+
+### Define Root State and Dispatch Types
+
+[Redux Toolkit's `configureStore` API](https://redux-toolkit.js.org/api/configureStore) should not need any additional typings. You will, however, want to extract the `RootState` type and the `Dispatch` type so that they can be referenced as needed. Inferring these types from the store itself means that they correctly update as you add more state slices or modify middleware settings.
+
+Since those are types, it's safe to export them directly from your store setup file such as `app/store.ts` and import them directly into other files.
+
+```ts title="app/store.ts"
+import { configureStore } from '@reduxjs/toolkit'
+// ...
+
+const store = configureStore({
+  reducer: {
+    posts: postsReducer,
+    comments: commentsReducer,
+    users: usersReducer,
+  },
+})
+
+// highlight-start
+// Infer the `RootState` and `AppDispatch` types from the store itself
+export type RootState = ReturnType<typeof store.getState>
+// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
+export type AppDispatch = typeof store.dispatch
+// highlight-end
+```
+
+### Define Typed Hooks
+
+While it's possible to import the `RootState` and `AppDispatch` types into each component, it's **better to create typed versions of the `useDispatch` and `useSelector` hooks for usage in your application**. This is important for a couple reasons:
+
+- For `useSelector`, it saves you the need to type `(state: RootState)` every time
+- For `useDispatch`, the default `Dispatch` type does not know about thunks. In order to correctly dispatch thunks, you need to use the specific customized `AppDispatch` type from the store that includes the thunk middleware types, and use that with `useDispatch`. Adding a pre-typed `useDispatch` hook keeps you from forgetting to import `AppDispatch` where it's needed.
+
+Since these are actual variables, not types, it's important to define them in a separate file such as `app/hooks.ts`, not the store setup file. This allows you to import them into any component file that needs to use the hooks, and avoids potential circular import dependency issues.
+
+```ts title="app/hooks.ts"
+import { useDispatch, useSelector } from 'react-redux'
+import type { RootState, AppDispatch } from './store'
+
+// highlight-start
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch = useDispatch.withTypes<AppDispatch>()
+export const useAppSelector = useSelector.withTypes<RootState>()
+// highlight-end
+```
+
+## Application Usage
+
+### Define Slice State and Action Types
+
+Each slice file should define a type for its initial state value, so that `createSlice` can correctly infer the type of `state` in each case reducer.
+
+All generated actions should be defined using the `PayloadAction<T>` type from Redux Toolkit, which takes the type of the `action.payload` field as its generic argument.
+
+You can safely import the `RootState` type from the store file here. It's a circular import, but the TypeScript compiler can correctly handle that for types. This may be needed for use cases like writing selector functions.
+
+```ts title="features/counter/counterSlice.ts"
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import type { RootState } from '../../app/store'
+
+// highlight-start
+// Define a type for the slice state
+interface CounterState {
+  value: number
+}
+
+// Define the initial state using that type
+const initialState: CounterState = {
+  value: 0,
+}
+// highlight-end
+
+export const counterSlice = createSlice({
+  name: 'counter',
+  // `createSlice` will infer the state type from the `initialState` argument
+  initialState,
+  reducers: {
+    increment: (state) => {
+      state.value += 1
+    },
+    decrement: (state) => {
+      state.value -= 1
+    },
+    // highlight-start
+    // Use the PayloadAction type to declare the contents of `action.payload`
+    incrementByAmount: (state, action: PayloadAction<number>) => {
+      // highlight-end
+      state.value += action.payload
+    },
+  },
+})
+
+export const { increment, decrement, incrementByAmount } = counterSlice.actions
+
+// Other code such as selectors can use the imported `RootState` type
+export const selectCount = (state: RootState) => state.counter.value
+
+export default counterSlice.reducer
+```
+
+The generated action creators will be correctly typed to accept a `payload` argument based on the `PayloadAction<T>` type you provided for the reducer. For example, `incrementByAmount` requires a `number` as its argument.
+
+In some cases, [TypeScript may unnecessarily tighten the type of the initial state](https://github.com/reduxjs/redux-toolkit/pull/827). If that happens, you can work around it by casting the initial state using `as`, instead of declaring the type of the variable:
+
+```ts
+// Workaround: cast state instead of declaring variable type
+const initialState = {
+  value: 0,
+} as CounterState
+```
+
+### Use Typed Hooks in Components
+
+In component files, import the pre-typed hooks instead of the standard hooks from React-Redux.
+
+```tsx title="features/counter/Counter.tsx"
+import React, { useState } from 'react'
+
+// highlight-next-line
+import { useAppSelector, useAppDispatch } from 'app/hooks'
+
+import { decrement, increment } from './counterSlice'
+
+export function Counter() {
+  // highlight-start
+  // The `state` arg is correctly typed as `RootState` already
+  const count = useAppSelector((state) => state.counter.value)
+  const dispatch = useAppDispatch()
+  // highlight-end
+
+  // omit rendering logic
+}
+```
+
+## What's Next?
+
+See [the "Usage with TypeScript" page](../using-react-redux/usage-with-typescript.md) for extended details on how to use Redux Toolkit's APIs with TypeScript.

docs/using-react-redux/accessing-store.md

@@ -3,8 +3,11 @@ id: accessing-store
 title: Accessing the Store
 hide_title: true
 sidebar_label: Accessing the Store
+description: 'Usage > Accessing the Store: techniques for getting the store in your components'
 ---
 
+ 
+
 # Accessing the Store
 
 React Redux provides APIs that allow your components to dispatch actions and subscribe to data updates from the store.
@@ -14,23 +17,26 @@ store interaction is handled. In typical usage, your own components should never
 won't ever reference the store directly. React Redux also internally handles the details of how the store and state are
 propagated to connected components, so that this works as expected by default.
 
-However, there may be certain use cases where you may need to customize how the store and state are propagated to
+However, there may be certain use cases where you may need to customize how the store is passed to
 connected components, or access the store directly. Here are some examples of how to do this.
 
 ## Understanding Context Usage
 
-Internally, React Redux uses [React's "context" feature](https://reactjs.org/docs/context.html) to make the
+Internally, React Redux uses [React's "context" feature](https://react.dev/learn/passing-data-deeply-with-context) to make the
 Redux store accessible to deeply nested connected components. As of React Redux version 6, this is normally handled
 by a single default context object instance generated by `React.createContext()`, called `ReactReduxContext`.
 
-React Redux's `<Provider>` component uses `<ReactReduxContext.Provider>` to put the Redux store and the current store
-state into context, and `connect` uses `<ReactReduxContext.Consumer>` to read those values and handle updates.
+React Redux's `<Provider>` component uses `<ReactReduxContext.Provider>` to put the Redux store and internal subscription wrappers into context. `useSelector`, `useDispatch`, and `connect` call `useContext(ReactReduxContext)` to read those values and handle updates.
+
+## Using the `useStore` Hook
+
+The [`useStore` hook](../api/hooks.md#useStore) returns the current store instance from the default `ReactReduxContext`. If you truly need to access the store, this is the recommended approach.
 
 ## Providing Custom Context
 
 Instead of using the default context instance from React Redux, you may supply your own custom context instance.
 
-```js
+```jsx
 <Provider context={MyContext} store={store}>
   <App />
 </Provider>
@@ -47,13 +53,13 @@ export default connect(
   mapDispatch,
   null,
   { context: MyContext }
-)(MyComponent);
+)(MyComponent)
 
 // or, call connect as normal to start
 const ConnectedComponent = connect(
   mapState,
   mapDispatch
-)(MyComponent);
+)(MyComponent)
 
 // Later, pass the custom context as a prop to the connected component
 <ConnectedComponent context={MyContext} />
@@ -68,16 +74,20 @@ The following runtime error occurs when React Redux does not find a store in the
 >
 > Could not find "store" in the context of "Connect(MyComponent)". Either wrap the root component in a `<Provider>`, or pass a custom React context provider to `<Provider>` and the corresponding React context consumer to Connect(Todo) in connect options.
 
+### Custom Context and the hooks API
+
+To access the custom context via the hooks API, you can create custom hooks via the [hook creator functions](../api/hooks.md#custom-context).
+
 ## Multiple Stores
 
 [Redux was designed to use a single store](https://redux.js.org/api/store#a-note-for-flux-users).
-However, if you are in an unavoidable position of needing to use multiple stores, with v6 you may do so by providing (multiple) custom contexts.
+However, if you are in an unavoidable position of needing to use multiple stores, as of v6 you may do so by providing (multiple) custom contexts.
 This also provides a natural isolation of the stores as they live in separate context instances.
 
 ```js
 // a naive example
-const ContextA = React.createContext();
-const ContextB = React.createContext();
+const ContextA = React.createContext(null);
+const ContextB = React.createContext(null);
 
 // assuming reducerA and reducerB are proper reducer functions
 const storeA = createStore(reducerA);
@@ -114,25 +124,35 @@ compose(
 In rare cases, you may need to access the Redux store directly in your own components. This can be done by rendering
 the appropriate context consumer yourself, and accessing the `store` field out of the context value.
 
-> **Note**: This is **_not_ considered part of the React Redux public API, and may break without notice**. We do recognize
-> that the community has use cases where this is necessary, and will try to make it possible for users to build additional
-> functionality on top of React Redux, but our specific use of context is considered an implementation detail.
-> If you have additional use cases that are not sufficiently covered by the current APIs, please file an issue to discuss
-> possible API improvements.
+:::caution
 
-```js
+This is **_not_ considered part of the React Redux public API, and may break without notice**. We do recognize
+that the community has use cases where this is necessary, and will try to make it possible for users to build additional
+functionality on top of React Redux, but our specific use of context is considered an implementation detail.
+If you have additional use cases that are not sufficiently covered by the current APIs, please file an issue to discuss
+possible API improvements.
+
+:::
+
+```jsx
 import { ReactReduxContext } from 'react-redux'
 
-// in your connected component
+// Somewhere inside of a <Provider>
 function MyConnectedComponent() {
+  // Access the store via the `useContext` hook
+  const { store } = useContext(ReactReduxContext)
+
+  // alternately, use the render props form of the context
+  /*
   return (
     <ReactReduxContext.Consumer>
       {({ store }) => {
         // do something useful with the store, like passing it to a child
         // component where it can be used in lifecycle methods
       }}
     </ReactReduxContext.Consumer>
-  );
+  )
+  */
 }
 ```