Merge branch 'v2.0-integration' into get-default-enhancers

Author: EskiMojo14

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/getDefaultMiddleware.mdx

@@ -70,7 +70,7 @@ It is preferable to use the chainable `.concat(...)` and `.prepend(...)` methods
 
 One of the goals of Redux Toolkit is to provide opinionated defaults and prevent common mistakes. As part of that,
 `getDefaultMiddleware` includes some middleware that are added **in development builds of your app only** to
-provide runtime checks for two common issues:
+provide runtime checks for three common issues:
 
 - [Immutability check middleware](./immutabilityMiddleware.mdx): deeply compares
   state values for mutations. It can detect mutations in reducers during a dispatch, and also mutations that occur between
@@ -82,13 +82,21 @@ provide runtime checks for two common issues:
   such as functions, Promises, Symbols, and other non-plain-JS-data values. When a non-serializable value is detected, a
   console error will be printed with the key path for where the non-serializable value was detected.
 
+- [Action creator check middleware](./actionCreatorMiddleware.mdx): another custom middleware created specifically for use in Redux Toolkit.
+  Identifies when an action creator was mistakenly dispatched without being called, and warns to console with the action type.
+
 In addition to these development tool middleware, it also adds [`redux-thunk`](https://github.com/reduxjs/redux-thunk)
 by default, since thunks are the basic recommended side effects middleware for Redux.
 
 Currently, the return value is:
 
 ```js
-const middleware = [thunk, immutableStateInvariant, serializableStateInvariant]
+const middleware = [
+  actionCreatorInvariant,
+  immutableStateInvariant,
+  thunk,
+  serializableStateInvariant,
+]
 ```
 
 ### Production
@@ -153,10 +161,15 @@ interface SerializableStateInvariantMiddlewareOptions {
   // See "Serializability Middleware" page for definition
 }
 
+interface ActionCreatorInvariantMiddlewareOptions {
+  // See "Action Creator Middleware" page for definition
+}
+
 interface GetDefaultMiddlewareOptions {
   thunk?: boolean | ThunkOptions
   immutableCheck?: boolean | ImmutableStateInvariantMiddlewareOptions
   serializableCheck?: boolean | SerializableStateInvariantMiddlewareOptions
+  actionCreatorCheck?: boolean | ActionCreatorInvariantMiddlewareOptions
 }
 
 function getDefaultMiddleware<S = any>(

docs/introduction/getting-started.md

@@ -32,18 +32,26 @@ you make your Redux code better.
 
 ## Installation
 
-### Using Create React App
+### Create a React Redux App
 
-The recommended way to start new apps with React and Redux is by using the [official Redux+JS template](https://github.com/reduxjs/cra-template-redux) or [Redux+TS template](https://github.com/reduxjs/cra-template-redux-typescript) for [Create React App](https://github.com/facebook/create-react-app), which takes advantage of **[Redux Toolkit](https://redux-toolkit.js.org/)** and React Redux's integration with React components.
+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
-# Redux + Plain JS template
-npx create-react-app my-app --template redux
+# 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
 
-# Redux + TypeScript template
-npx create-react-app my-app --template redux-typescript
+# 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 App
 
 Redux Toolkit is available as a package on NPM for use with a module bundler or in a Node application:

docs/rtk-query/comparison.md

@@ -95,6 +95,6 @@ This comparison table strives to be as accurate and as unbiased as possible. If
 
 ## Further Information
 
-- The [React Query "Comparison" page](https://react-query.tanstack.com/comparison) has an additional detailed feature set comparison table and discussion of capabilities
+- The [React Query "Comparison" page](https://tanstack.com/query/latest/docs/react/comparison) has an additional detailed feature set comparison table and discussion of capabilities
 - Urql maintainer Phil Pluckthun wrote [an excellent explanation of what a "normalized cache" is and how Urql's cache works](https://kitten.sh/graphql-normalized-caching)
 - The [RTK Query "Cache Behavior" page](./usage/cache-behavior.mdx#tradeoffs) has further details on why RTK Query does not implement a normalized cache

examples/query/react/mutations/src/mocks/db.ts

@@ -51,7 +51,11 @@ export const handlers = [
     const id = Array.isArray(req.params.id) ? req.params.id[0] : req.params.id
 
     const post = db.post.update({
-      where: { id },
+      where: {
+        id: {
+          equals: id,
+        },
+      },
       data: { name },
     })
 

packages/toolkit/src/actionCreatorInvariantMiddleware.ts

@@ -0,0 +1,34 @@
+import type { Middleware } from 'redux'
+import { isActionCreator as isRTKAction } from './createAction'
+
+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 }
+}
+
+export function getMessage(type?: unknown) {
+  const splitType = type ? `${type}`.split('/') : []
+  const actionName = splitType[splitType.length - 1] || 'actionCreator'
+  return `Detected an action creator with type "${
+    type || 'unknown'
+  }" being dispatched. 
+Make sure you're calling the action creator before dispatching, i.e. \`dispatch(${actionName}())\` instead of \`dispatch(${actionName})\`. This is necessary even if the action has no payload.`
+}
+
+export function createActionCreatorInvariantMiddleware(
+  options: ActionCreatorInvariantMiddlewareOptions = {}
+): Middleware {
+  if (process.env.NODE_ENV === 'production') {
+    return () => (next) => (action) => next(action)
+  }
+  const { isActionCreator = isRTKAction } = options
+  return () => (next) => (action) => {
+    if (isActionCreator(action)) {
+      console.warn(getMessage(action.type))
+    }
+    return next(action)
+  }
+}

packages/toolkit/src/createAction.ts

@@ -5,6 +5,7 @@ import type {
   IfVoid,
   IsAny,
 } from './tsHelpers'
+import { hasMatchFunction } from './tsHelpers'
 import isPlainObject from './isPlainObject'
 
 /**
@@ -293,6 +294,20 @@ export function isAction(action: unknown): action is Action<unknown> {
   return isPlainObject(action) && 'type' in action
 }
 
+/**
+ * Returns true if value is an RTK-like action creator, with a static type property and match method.
+ */
+export function isActionCreator(
+  action: unknown
+): action is BaseActionCreator<unknown, string> & Function {
+  return (
+    typeof action === 'function' &&
+    'type' in action &&
+    // hasMatchFunction only wants Matchers but I don't see the point in rewriting it
+    hasMatchFunction(action as any)
+  )
+}
+
 /**
  * Returns true if value is an action with a string type and valid Flux Standard Action keys.
  */

packages/toolkit/src/createAsyncThunk.ts

@@ -15,7 +15,7 @@ export type BaseThunkAPI<
   S,
   E,
   D extends Dispatch = Dispatch,
-  RejectedValue = undefined,
+  RejectedValue = unknown,
   RejectedMeta = unknown,
   FulfilledMeta = unknown
 > = {
@@ -137,7 +137,7 @@ type GetDispatch<ThunkApiConfig> = ThunkApiConfig extends {
     >
   : ThunkDispatch<GetState<ThunkApiConfig>, GetExtra<ThunkApiConfig>, AnyAction>
 
-type GetThunkAPI<ThunkApiConfig> = BaseThunkAPI<
+export type GetThunkAPI<ThunkApiConfig> = BaseThunkAPI<
   GetState<ThunkApiConfig>,
   GetExtra<ThunkApiConfig>,
   GetDispatch<ThunkApiConfig>,

packages/toolkit/src/getDefaultMiddleware.ts

@@ -1,6 +1,8 @@
 import type { Middleware, AnyAction } from 'redux'
 import type { ThunkMiddleware } from 'redux-thunk'
 import { thunk as thunkMiddleware, withExtraArgument } from 'redux-thunk'
+import type { ActionCreatorInvariantMiddlewareOptions } from './actionCreatorInvariantMiddleware'
+import { createActionCreatorInvariantMiddleware } from './actionCreatorInvariantMiddleware'
 import type { ImmutableStateInvariantMiddlewareOptions } from './immutableStateInvariantMiddleware'
 /* PROD_START_REMOVE_UMD */
 import { createImmutableStateInvariantMiddleware } from './immutableStateInvariantMiddleware'
@@ -23,6 +25,7 @@ interface GetDefaultMiddlewareOptions {
   thunk?: boolean | ThunkOptions
   immutableCheck?: boolean | ImmutableStateInvariantMiddlewareOptions
   serializableCheck?: boolean | SerializableStateInvariantMiddlewareOptions
+  actionCreatorCheck?: boolean | ActionCreatorInvariantMiddlewareOptions
 }
 
 export type ThunkMiddlewareFor<
@@ -41,6 +44,7 @@ export type GetDefaultMiddleware<S = any> = <
     thunk: true
     immutableCheck: true
     serializableCheck: true
+    actionCreatorCheck: true
   }
 >(
   options?: O
@@ -52,6 +56,7 @@ export const buildGetDefaultMiddleware = <S = any>(): GetDefaultMiddleware<S> =>
       thunk = true,
       immutableCheck = true,
       serializableCheck = true,
+      actionCreatorCheck = true,
     } = options ?? {}
 
     let middlewareArray = new MiddlewareArray<Middleware[]>()
@@ -92,6 +97,17 @@ export const buildGetDefaultMiddleware = <S = any>(): GetDefaultMiddleware<S> =>
         )
       }
     }
+    if (actionCreatorCheck) {
+      let actionCreatorOptions: ActionCreatorInvariantMiddlewareOptions = {}
+
+      if (!isBoolean(actionCreatorCheck)) {
+        actionCreatorOptions = actionCreatorCheck
+      }
+
+      middlewareArray.unshift(
+        createActionCreatorInvariantMiddleware(actionCreatorOptions)
+      )
+    }
 
     return middlewareArray as any
   }