Merge branch 'master' into pr/cvereterra/3430

Author: phryneas

.github/FUNDING.yml

@@ -1 +1 @@
-github: [phryneas, markerikson]
+github: [phryneas, markerikson, EskiMojo14]

.github/workflows/publish.yml

@@ -0,0 +1,34 @@
+name: Publish Package to npmjs
+on:
+  # keeping it purely manual for now as to not accidentally trigger a release
+  #release:
+  #  types: [published]
+  workflow_dispatch:
+    inputs:
+      package:
+        description: 'Package'
+        required: true
+        type: choice
+        options:
+          - '@reduxjs/toolkit'
+          - '@rtk-query/codegen-openapi'
+          - '@rtk-query/graphql-request-base-query'
+          - '@reduxjs/rtk-codemods'
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    permissions:
+      id-token: write
+      contents: read
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '18.x'
+          registry-url: 'https://registry.npmjs.org'
+          cache: 'yarn'
+      - run: yarn install --frozen-lockfile
+      - run: yarn workspace ${{ inputs.package }} test
+      - run: yarn workspace ${{ inputs.package }} exec npm publish --access public --provenance
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_PUBLISH_TOKEN }}

.github/workflows/tests.yml

@@ -18,6 +18,8 @@ jobs:
           filters: |
             toolkit:
               - 'packages/toolkit/**'
+              - 'examples/publish-ci/**'
+              - '.github/workflows/tests.yml'
 
   build:
     needs: changes
@@ -43,6 +45,13 @@ jobs:
       - name: Install deps
         run: yarn install
 
+      # Read existing version, reuse that, add a Git short hash
+      - name: Set build version to Git commit
+        run: node scripts/writeGitVersion.js $(git rev-parse --short HEAD)
+
+      - name: Check updated version
+        run: jq .version package.json
+
       - name: Pack
         run: yarn pack
 
@@ -96,7 +105,7 @@ jobs:
       fail-fast: false
       matrix:
         node: ['16.x']
-        ts: ['4.1', '4.2', '4.3', '4.4', '4.5', '4.6', '4.7', '4.8', '4.9.2-rc']
+        ts: ['4.1', '4.2', '4.3', '4.4', '4.5', '4.6', '4.7', '4.8', '4.9.5', '5.0', '5.1', '5.2']
     steps:
       - name: Checkout repo
         uses: actions/checkout@v2
@@ -121,9 +130,70 @@ jobs:
       - name: Install build artifact
         run: yarn add ./package.tgz
 
+      - name: Show installed RTK versions
+        run: yarn info @reduxjs/toolkit
+
       - run: sed -i -e /@remap-prod-remove-line/d ./tsconfig.base.json ./jest.config.js ./src/tests/*.* ./src/query/tests/*.*
 
       - name: Test types
         run: |
           yarn tsc --version
           yarn type-tests
+
+  test-published-artifact:
+    name: Test Published Artifact ${{ matrix.example }}
+
+    needs: [build]
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        node: ['16.x']
+        example:
+          [
+            'cra4',
+            'cra5',
+            'next',
+            'vite',
+            'node-standard',
+            'node-esm',
+            'are-the-types-wrong',
+          ]
+    defaults:
+      run:
+        working-directory: ./examples/publish-ci/${{ matrix.example }}
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v2
+
+      - name: Use node ${{ matrix.node }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node }}
+          cache: 'yarn'
+
+      - name: Install deps
+        run: yarn install
+
+      - name: Remove existing RTK
+        run: yarn remove @reduxjs/toolkit
+
+      - uses: actions/download-artifact@v2
+        with:
+          name: package
+          path: ./examples/publish-ci/${{ matrix.example }}
+
+      - name: Check folder contents
+        run: ls -l .
+
+      - name: Install RTK build artifact
+        run: yarn add ./package.tgz
+
+      - name: Show installed RTK versions
+        run: yarn info @reduxjs/toolkit
+
+      - name: Build example
+        run: yarn build
+
+      - name: Run test step
+        run: yarn test

.gitignore

@@ -9,6 +9,7 @@ es
 
 .yalc
 yalc.lock
+yalc.sig
 
 .idea/
 .vscode/
@@ -29,7 +30,3 @@ typesversions
 !.yarn/versions
 .pnp.*
 *.tgz
-
-.yalc
-yalc.lock
-yalc.sig

docs/api/actionCreatorMiddleware.mdx

@@ -0,0 +1,67 @@
+---
+id: actionCreatorMiddleware
+title: Action Creator Middleware
+sidebar_label: Action Creator Middleware
+hide_title: true
+---
+
+ 
+
+# Action Creator Middleware
+
+A custom middleware that detects if an action creator has been mistakenly dispatched, instead of being called before dispatching.
+
+A common mistake is to call `dispatch(actionCreator)` instead of `dispatch(actionCreator())`.
+This tends to "work" as the action creator has the static `type` property, but can lead to unexpected behaviour.
+
+## Options
+
+```ts no-transpile
+export interface ActionCreatorInvariantMiddlewareOptions {
+  /**
+   * The function to identify whether a value is an action creator.
+   * The default checks for a function with a static type property and match method.
+   */
+  isActionCreator?: (action: unknown) => action is Function & { type?: unknown }
+}
+```
+
+## Exports
+
+### `createActionCreatorInvariantMiddleware`
+
+Creates an instance of the action creator check middleware, with the given options.
+
+You will most likely not need to call this yourself, as `getDefaultMiddleware` already does so.
+Example:
+
+```ts
+// file: reducer.ts noEmit
+
+export default function (state = {}, action: any) {
+  return state
+}
+
+// file: store.ts
+
+import {
+  configureStore,
+  createActionCreatorInvariantMiddleware,
+} from '@reduxjs/toolkit'
+import reducer from './reducer'
+
+// Augment middleware to consider all functions with a static type property to be action creators
+const isActionCreator = (
+  action: unknown
+): action is Function & { type: unknown } =>
+  typeof action === 'function' && 'type' in action
+
+const actionCreatorMiddleware = createActionCreatorInvariantMiddleware({
+  isActionCreator,
+})
+
+const store = configureStore({
+  reducer,
+  middleware: [actionCreatorMiddleware],
+})
+```

docs/api/autoBatchEnhancer.mdx

@@ -84,9 +84,9 @@ Any action that is tagged with `action.meta[SHOULD_AUTOBATCH] = true` will be tr
 `autoBatchEnhancer` accepts options to configure how the notification callback is queued:
 
 - `{type: 'raf'}`: queues using `requestAnimationFrame` (default)
-- `{type: 'tick'}: queues using `queueMicrotask`
+- `{type: 'tick'}`: queues using `queueMicrotask`
 - `{type: 'timer, timeout: number}`: queues using `setTimeout`
-- `{type: 'callback', queueNotification: (notify: () => void) => void}: lets you provide your own callback, such as a debounced or throttled function
+- `{type: 'callback', queueNotification: (notify: () => void) => void}`: lets you provide your own callback, such as a debounced or throttled function
 
 The default behavior is to queue the notifications using `requestAnimationFrame`.
 

docs/api/configureStore.mdx

@@ -9,16 +9,36 @@ hide_title: true
 
 # `configureStore`
 
-A friendly abstraction over the standard Redux `createStore` function that adds good defaults
-to the store setup for a better development experience.
+The standard method for creating a Redux store. It uses the low-level Redux core `createStore` method internally, but wraps that to provide good defaults to the store setup for a better development experience.
+
+## Purpose and Behavior
+
+A standard Redux store setup typically requires multiple pieces of configuration:
+
+- Combining the slice reducers into the root reducer
+- Creating the middleware enhancer, usually with the thunk middleware or other side effects middleware, as well as middleware that might be used for development checks
+- Adding the Redux DevTools enhancer, and composing the enhancers together
+- Calling `createStore`
+
+Legacy Redux usage patterns typically required several dozen lines of copy-pasted boilerplate to achieve this.
+
+Redux Toolkit's `configureStore` simplifies that setup process, by doing all that work for you. One call to `configureStore` will:
+
+- Call `combineReducers` to combine your slices reducers into the root reducer function
+- Add the thunk middleware and called `applyMiddleware`
+- In development, automatically add more middleware to check for common mistakes like accidentally mutating the state
+- Automatically set up the Redux DevTools Extension connection
+- Call `createStore` to create a Redux store using that root reducer and those configuration options
+
+`configureStore` also offers an improved API and usage patterns compared to the original `createStore` by accepting named fields for `reducer`, `preloadedState`, `middleware`, `enhancers`, and `devtools`, as well as much better TS type inference.
 
 ## Parameters
 
 `configureStore` accepts a single configuration object parameter, with the following options:
 
 ```ts no-transpile
 type ConfigureEnhancersCallback = (
-  defaultEnhancers: StoreEnhancer[]
+  defaultEnhancers: EnhancerArray<[StoreEnhancer]>
 ) => StoreEnhancer[]
 
 interface ConfigureStoreOptions<
@@ -107,7 +127,8 @@ a list of the specific options that are available.
 Defaults to `true`.
 
 #### `trace`
-The Redux DevTools Extension recently added [support for showing action stack traces](https://github.com/reduxjs/redux-devtools/blob/main/extension/docs/Features/Trace.md) that show exactly where each action was dispatched. 
+
+The Redux DevTools Extension recently added [support for showing action stack traces](https://github.com/reduxjs/redux-devtools/blob/main/extension/docs/Features/Trace.md) that show exactly where each action was dispatched.
 Capturing the traces can add a bit of overhead, so the DevTools Extension allows users to configure whether action stack traces are captured by [setting the 'trace' argument](https://github.com/reduxjs/redux-devtools/blob/main/extension/docs/API/Arguments.md#trace).
 If the DevTools are enabled by passing `true` or an object, then `configureStore` will default to enabling capturing action stack traces in development mode only.
 
@@ -129,7 +150,7 @@ If defined as a callback function, it will be called with the existing array of
 and should return a new array of enhancers. This is primarily useful for cases where a store enhancer needs to be added
 in front of `applyMiddleware`, such as `redux-first-router` or `redux-offline`.
 
-Example: `enhancers: (defaultEnhancers) => [offline, ...defaultEnhancers]` will result in a final setup
+Example: `enhancers: (defaultEnhancers) => defaultEnhancers.prepend(offline)` will result in a final setup
 of `[offline, applyMiddleware, devToolsExtension]`.
 
 ## Usage
@@ -195,7 +216,7 @@ const preloadedState = {
   visibilityFilter: 'SHOW_COMPLETED',
 }
 
-const debounceNotify = _.debounce(notify => notify());
+const debounceNotify = _.debounce((notify) => notify())
 
 const store = configureStore({
   reducer,

docs/api/createListenerMiddleware.mdx

@@ -422,6 +422,8 @@ These methods provide the ability to write conditional logic based on future dis
 
 Both these methods are cancellation-aware, and will throw a `TaskAbortError` if the listener instance is cancelled while paused.
 
+Note that both `take` and `condition` will only resolve **after the next action** has been dispatched. They do not resolve immediately even if their predicate would return true for the current state.
+
 ### Child Tasks
 
 - `fork: (executor: (forkApi: ForkApi) => T | Promise<T>) => ForkedTask<T>`: Launches a "child task" that may be used to accomplish additional work. Accepts any sync or async function as its argument, and returns a `{result, cancel}` object that can be used to check the final status and return value of the child task, or cancel it while in-progress.
@@ -831,7 +833,7 @@ First, you can import effect callbacks from slice files into the middleware file
 
 ```ts no-transpile title="app/listenerMiddleware.ts"
 import { action1, listener1 } from '../features/feature1/feature1Slice'
-import { action2, listener2 } from '../features/feature2/feature1Slice'
+import { action2, listener2 } from '../features/feature2/feature2Slice'
 
 listenerMiddleware.startListening({ actionCreator: action1, effect: listener1 })
 listenerMiddleware.startListening({ actionCreator: action2, effect: listener2 })

docs/api/createSlice.mdx

@@ -15,7 +15,7 @@ and automatically generates action creators and action types that correspond to
 This API is the standard approach for writing Redux logic.
 
 Internally, it uses [`createAction`](./createAction.mdx) and [`createReducer`](./createReducer.mdx), so
-you may also use [Immer](https://immerjs.github.io/immer/) to write "mutating" immutable updates:
+you may also use [Immer](../usage/immer-reducers.md) to write "mutating" immutable updates:
 
 ```ts
 import { createSlice } from '@reduxjs/toolkit'
@@ -136,16 +136,17 @@ const todosSlice = createSlice({
 
 ### `extraReducers`
 
-One of the key concepts of Redux is that each slice reducer "owns" its slice of state, and that many slice reducers
-can independently respond to the same action type. `extraReducers` allows `createSlice` to respond to other action types
-besides the types it has generated.
+Conceptually, each slice reducer "owns" its slice of state. There's also a natural correspondance between the update logic defined inside `reducers`, and the action types that are generated based on those.
 
-As case reducers specified with `extraReducers` are meant to reference "external" actions, they will not have actions generated in `slice.actions`.
+However, there are many times that a Redux slice may also need to update its own state in response to action types that were defined elsewhere in the application (such as clearing many different kinds of data when a "user logged out" action is dispatched). This can include action types defined by another `createSlice` call, actions generated by a `createAsyncThunk`, RTK Query endpoint matchers, or any other action. In addition, one of the key concepts of Redux is that many slice reducers can independently respond to the same action type.
 
-As with `reducers`, these case reducers will also be passed to `createReducer` and may "mutate" their state safely.
+**`extraReducers` allows `createSlice` to respond and update its own state in response to other action types besides the types it has generated.**
 
-If two fields from `reducers` and `extraReducers` happen to end up with the same action type string,
-the function from `reducers` will be used to handle that action type.
+As with the `reducers` field, each case reducer in `extraReducers` is [wrapped in Immer and may use "mutating" syntax to safely update the state inside](../usage/immer-reducers.md).
+
+However, unlike the `reducers` field, each individual case reducer inside of `extraReducers` will _not_ generate a new action type or action creator.
+
+If two fields from `reducers` and `extraReducers` happen to end up with the same action type string, the function from `reducers` will be used to handle that action type.
 
 ### The `extraReducers` "builder callback" notation
 
@@ -162,6 +163,14 @@ See [the "Builder Callback Notation" section of the `createReducer` reference](.
 
 ### The `extraReducers` "map object" notation
 
+:::caution
+
+The "map object" notation is deprecated and will be removed in RTK 2.0. Please migrate to the "builder callback" notation, which offers much better TypeScript support and more flexibility. (There is [a "builder callback" codemod available to help with this migration](./codemods.mdx).)
+
+If you do not use the `builder callback` and are using TypeScript, you will need to use `actionCreator.type` or `actionCreator.toString()` to force the TS compiler to accept the computed property. Please see [Usage With TypeScript](./../usage/usage-with-typescript.md#type-safety-with-extraReducers) for further details.
+
+:::
+
 Like `reducers`, `extraReducers` can be an object containing Redux case reducer functions. However, the keys should
 be other Redux string action type constants, and `createSlice` will _not_ auto-generate action types or action creators
 for reducers included in this parameter.
@@ -185,12 +194,6 @@ createSlice({
 })
 ```
 
-:::tip
-
-We recommend using the `builder callback` API as the default, especially if you are using TypeScript. If you do not use the `builder callback` and are using TypeScript, you will need to use `actionCreator.type` or `actionCreator.toString()` to force the TS compiler to accept the computed property. Please see [Usage With TypeScript](./../usage/usage-with-typescript.md#type-safety-with-extraReducers) for further details.
-
-:::
-
 ## Return Value
 
 `createSlice` will return an object that looks like: