Merge branch 'master' of https://github.com/reduxjs/redux-toolkit into feat/use-suspend-all

Author: FaberVitale

.github/workflows/test-codegen.yml

@@ -31,7 +31,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: ['16.x']
 
     steps:
       - uses: actions/checkout@v2

.github/workflows/tests.yml

@@ -28,7 +28,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: ['14.x']
+        node: ['16.x']
 
     steps:
       - name: Checkout repo
@@ -58,7 +58,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        node: ['14.x']
+        node: ['16.x']
     steps:
       - name: Checkout repo
         uses: actions/checkout@v2
@@ -95,7 +95,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        node: ['14.x']
+        node: ['16.x']
         ts: ['4.1', '4.2', '4.3', '4.4', '4.5', '4.6', '4.7']
     steps:
       - name: Checkout repo

.yarn/patches/react-scripts__npm_4.0.2.patch

@@ -98,16 +98,17 @@ For more details on how the `middleware` parameter works and the list of middlew
 
 ### `devTools`
 
-If this is a boolean, it will be used to indicate whether `configureStore` should automatically enable support for [the Redux DevTools browser extension](https://github.com/zalmoxisus/redux-devtools-extension).
+If this is a boolean, it will be used to indicate whether `configureStore` should automatically enable support for [the Redux DevTools browser extension](https://github.com/reduxjs/redux-devtools).
 
 If it is an object, then the DevTools Extension will be enabled, and the options object will be passed to `composeWithDevtools()`. See
-the DevTools Extension docs for [`EnhancerOptions`](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md#windowdevtoolsextensionconfig) for
+the DevTools Extension docs for [`EnhancerOptions`](https://github.com/reduxjs/redux-devtools/blob/main/extension/docs/API/Arguments.md) for
 a list of the specific options that are available.
 
 Defaults to `true`.
 
-The Redux DevTools Extension recently added [support for showing action stack traces](https://github.com/zalmoxisus/redux-devtools-extension/blob/d4ef75691ad294646f74bca38b973b19850a37cf/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.
-
+#### `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. 
+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.
 
 ### `preloadedState`
@@ -137,7 +138,7 @@ of `[offline, applyMiddleware, devToolsExtension]`.
 
 ```ts
 // file: reducers.ts noEmit
-import { Reducer } from '@reduxjs/toolkit'
+import type { Reducer } from '@reduxjs/toolkit'
 declare const rootReducer: Reducer<{}>
 export default rootReducer
 
@@ -154,12 +155,12 @@ const store = configureStore({ reducer: rootReducer })
 
 ```ts no-transpile
 // file: todos/todosReducer.ts noEmit
-import { Reducer } from '@reduxjs/toolkit'
+import type { Reducer } from '@reduxjs/toolkit'
 declare const reducer: Reducer<{}>
 export default reducer
 
 // file: visibility/visibilityReducer.ts noEmit
-import { Reducer } from '@reduxjs/toolkit'
+import type { Reducer } from '@reduxjs/toolkit'
 declare const reducer: Reducer<{}>
 export default reducer
 
@@ -169,8 +170,8 @@ import { configureStore } from '@reduxjs/toolkit'
 // We'll use redux-logger just as an example of adding another middleware
 import logger from 'redux-logger'
 
-// And use redux-batch as an example of adding enhancers
-import { reduxBatch } from '@manaflair/redux-batch'
+// And use redux-batched-subscribe as an example of adding enhancers
+import { batchedSubscribe } from 'redux-batched-subscribe'
 
 import todosReducer from './todos/todosReducer'
 import visibilityReducer from './visibility/visibilityReducer'
@@ -194,17 +195,19 @@ const preloadedState = {
   visibilityFilter: 'SHOW_COMPLETED',
 }
 
+const debounceNotify = _.debounce(notify => notify());
+
 const store = configureStore({
   reducer,
   middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger),
   devTools: process.env.NODE_ENV !== 'production',
   preloadedState,
-  enhancers: [reduxBatch],
+  enhancers: [batchedSubscribe(debounceNotify)],
 })
 
 // The store has been created with these options:
 // - The slice reducers were automatically passed to combineReducers()
 // - redux-thunk and redux-logger were added as middleware
 // - The Redux DevTools Extension is disabled for production
-// - The middleware, batch, and devtools enhancers were composed together
+// - The middleware, batched subscribe, and devtools enhancers were composed together
 ```

docs/api/configureStore.mdx

@@ -154,7 +154,8 @@ This `match` method is a [TypeScript type guard](https://www.typescriptlang.org/
 This behavior can be particularly useful when used in custom middlewares, where manual casts might be neccessary otherwise.
 
 ```ts
-import { createAction, Action } from '@reduxjs/toolkit'
+import { createAction } from '@reduxjs/toolkit'
+import type { Action } from '@reduxjs/toolkit'
 
 const increment = createAction<number>('INCREMENT')
 
@@ -171,8 +172,9 @@ function someFunction(action: Action) {
 The `match` method can also be used as a filter method, which makes it powerful when used with redux-observable:
 
 ```ts
-import { createAction, Action } from '@reduxjs/toolkit'
-import { Observable } from 'rxjs'
+import { createAction } from '@reduxjs/toolkit'
+import type { Action } from '@reduxjs/toolkit'
+import type { Observable } from 'rxjs'
 import { map, filter } from 'rxjs/operators'
 
 const increment = createAction<number>('INCREMENT')

docs/api/createAction.mdx

@@ -399,7 +399,8 @@ A real-life example of that would look like this:
 
 ```ts no-transpile
 // file: store.ts noEmit
-import { configureStore, Reducer } from '@reduxjs/toolkit'
+import { configureStore } from '@reduxjs/toolkit'
+import type { Reducer } from '@reduxjs/toolkit'
 import { useDispatch } from 'react-redux'
 
 declare const reducer: Reducer<{}>
@@ -507,15 +508,47 @@ const fetchUserById = createAsyncThunk(
 )
 ```
 
+### Checking if a Promise Rejection was from an Error or Cancellation
+
+To investigate behavior around thunk cancellation, you can inspect various properties on the `meta` object of the dispatched action.
+If a thunk was cancelled, the result of the promise will be a `rejected` action (regardless of whether that action was actually dispatched to the store).
+
+- If it was cancelled before execution, `meta.condition` will be true.
+- If it was aborted while running, `meta.aborted` will be true.
+- If neither of those is true, the thunk was not cancelled, it was simply rejected, either by a Promise rejection or `rejectWithValue`.
+- If the thunk was not rejected, both `meta.aborted` and `meta.condition` will be `undefined`.
+
+So if you wanted to test that a thunk was cancelled before executing, you can do the following:
+
+```ts no-transpile
+import { createAsyncThunk, isRejected } from '@reduxjs/toolkit'
+
+test('this thunk should always be skipped', async () => {
+  const thunk = createAsyncThunk(
+    'users/fetchById',
+    async () => throw new Error('This promise should never be entered'),
+    {
+      condition: () => false,
+    }
+  )
+  const result = await thunk()(dispatch, getState, null)
+
+  expect(result.meta.condition).toBe(true)
+  expect(result.meta.aborted).toBe(false)
+})
+```
+
 ## Examples
 
 - Requesting a user by ID, with loading state, and only one request at a time:
 
 ```ts no-transpile
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
-import { userAPI } from './userAPI'
+import { userAPI, User } from './userAPI'
 
-const fetchUserById = createAsyncThunk(
+const fetchUserById = createAsyncThunk<User, string, {
+    state: { users: { loading: string, currentRequestId: string } }
+}> (  
   'users/fetchByIdStatus',
   async (userId: string, { getState, requestId }) => {
     const { currentRequestId, loading } = getState().users
@@ -592,7 +625,8 @@ const UsersComponent = () => {
 
 ```ts no-transpile
 // file: store.ts noEmit
-import { configureStore, Reducer } from '@reduxjs/toolkit'
+import { configureStore } from '@reduxjs/toolkit'
+import type { Reducer } from '@reduxjs/toolkit'
 import { useDispatch } from 'react-redux'
 import usersReducer from './user/slice'
 
@@ -609,7 +643,7 @@ export declare const userAPI: {
 // file: user/slice.ts
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
 import { userAPI } from './userAPI'
-import { AxiosError } from 'axios'
+import type { AxiosError } from 'axios'
 
 // Sample types that will be used
 export interface User {
@@ -691,10 +725,12 @@ declare module 'some-toast-library' {
 // file: user/UsersComponent.ts
 
 import React from 'react'
-import { useAppDispatch, RootState } from '../store'
+import { useAppDispatch } from '../store'
+import type { RootState } from '../store'
 import { useSelector } from 'react-redux'
-import { User, updateUser } from './slice'
-import { FormikHelpers } from 'formik'
+import { updateUser } from './slice'
+import type { User } from './slice'
+import type { FormikHelpers } from 'formik'
 import { showToast } from 'some-toast-library'
 
 interface FormValues extends Omit<User, 'id'> {}

docs/api/createAsyncThunk.mdx

@@ -18,7 +18,8 @@ Internally, it uses [`createAction`](./createAction.mdx) and [`createReducer`](.
 you may also use [Immer](https://immerjs.github.io/immer/) to write "mutating" immutable updates:
 
 ```ts
-import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import { createSlice } from '@reduxjs/toolkit'
+import type { PayloadAction } from '@reduxjs/toolkit'
 
 interface CounterState {
   value: number
@@ -108,7 +109,8 @@ const counterSlice = createSlice({
 If you need to customize the creation of the payload value of an action creator by means of a [`prepare callback`](./createAction.mdx#using-prepare-callbacks-to-customize-action-contents), the value of the appropriate field of the `reducers` argument object should be an object instead of a function. This object must contain two properties: `reducer` and `prepare`. The value of the `reducer` field should be the case reducer function while the value of the `prepare` field should be the prepare callback function:
 
 ```ts
-import { createSlice, PayloadAction, nanoid } from '@reduxjs/toolkit'
+import { createSlice, nanoid } from '@reduxjs/toolkit'
+import type { PayloadAction } from '@reduxjs/toolkit'
 
 interface Item {
   id: string
@@ -224,7 +226,8 @@ for references in a larger codebase.
 ## Examples
 
 ```ts
-import { createSlice, createAction, PayloadAction } from '@reduxjs/toolkit'
+import { createSlice, createAction } from '@reduxjs/toolkit'
+import type { PayloadAction } from '@reduxjs/toolkit'
 import { createStore, combineReducers } from 'redux'
 
 const incrementBy = createAction<number>('incrementBy')

docs/api/createSlice.mdx

@@ -48,7 +48,8 @@ Accepts the same inputs as `isAllOf` and will return a type guard function that
 A higher-order function that returns a type guard function that may be used to check whether an action was created by [`createAsyncThunk`](./createAsyncThunk).
 
 ```ts title="isAsyncThunkAction usage"
-import { isAsyncThunkAction, AnyAction } from '@reduxjs/toolkit'
+import { isAsyncThunkAction } from '@reduxjs/toolkit'
+import type { AnyAction } from '@reduxjs/toolkit'
 import { requestThunk1, requestThunk2 } from '@virtual/matchers'
 
 const isARequestAction = isAsyncThunkAction(requestThunk1, requestThunk2)
@@ -65,7 +66,8 @@ function handleRequestAction(action: AnyAction) {
 A higher-order function that returns a type guard function that may be used to check whether an action is a 'pending' action creator from the `createAsyncThunk` promise lifecycle.
 
 ```ts title="isPending usage"
-import { isPending, AnyAction } from '@reduxjs/toolkit'
+import { isPending } from '@reduxjs/toolkit'
+import type { AnyAction } from '@reduxjs/toolkit'
 import { requestThunk1, requestThunk2 } from '@virtual/matchers'
 
 const isAPendingAction = isPending(requestThunk1, requestThunk2)
@@ -82,7 +84,8 @@ function handlePendingAction(action: AnyAction) {
 A higher-order function that returns a type guard function that may be used to check whether an action is a 'fulfilled'' action creator from the `createAsyncThunk` promise lifecycle.
 
 ```ts title="isFulfilled usage"
-import { isFulfilled, AnyAction } from '@reduxjs/toolkit'
+import { isFulfilled } from '@reduxjs/toolkit'
+import type { AnyAction } from '@reduxjs/toolkit'
 import { requestThunk1, requestThunk2 } from '@virtual/matchers'
 
 const isAFulfilledAction = isFulfilled(requestThunk1, requestThunk2)
@@ -99,7 +102,8 @@ function handleFulfilledAction(action: AnyAction) {
 A higher-order function that returns a type guard function that may be used to check whether an action is a 'rejected' action creator from the `createAsyncThunk` promise lifecycle.
 
 ```ts title="isRejected usage"
-import { isRejected, AnyAction } from '@reduxjs/toolkit'
+import { isRejected } from '@reduxjs/toolkit'
+import type { AnyAction } from '@reduxjs/toolkit'
 import { requestThunk1, requestThunk2 } from '@virtual/matchers'
 
 const isARejectedAction = isRejected(requestThunk1, requestThunk2)
@@ -116,7 +120,8 @@ function handleRejectedAction(action: AnyAction) {
 A higher-order function that returns a type guard function that may be used to check whether an action is a 'rejected' action creator from the `createAsyncThunk` promise lifecycle that was created by [`rejectWithValue`](./createAsyncThunk#handling-thunk-errors).
 
 ```ts title="isRejectedWithValue usage"
-import { isRejectedWithValue, AnyAction } from '@reduxjs/toolkit'
+import { isRejectedWithValue } from '@reduxjs/toolkit'
+import type { AnyAction } from '@reduxjs/toolkit'
 import { requestThunk1, requestThunk2 } from '@virtual/matchers'
 
 const isARejectedWithValueAction = isRejectedWithValue(
@@ -143,8 +148,8 @@ First, let's examine an unnecessarily complex example:
 import {
   createAsyncThunk,
   createReducer,
-  PayloadAction,
 } from '@reduxjs/toolkit'
+import type { PayloadAction } from '@reduxjs/toolkit'
 
 interface Data {
   isInteresting: boolean
@@ -213,8 +218,8 @@ import {
   initialState,
   isSpecial,
   isInteresting,
-  Data,
 } from '@virtual/matchers' // This is a fake pkg that provides the types shown above
+import type { Data } from '@virtual/matchers' // This is a fake pkg that provides the types shown above
 
 const loadingReducer = createReducer(initialState, (builder) => {
   builder
@@ -238,8 +243,10 @@ const loadingReducer = createReducer(initialState, (builder) => {
 The function returned by `isAllOf` and `isAnyOf` can also be used as a TypeScript type guard in other contexts.
 
 ```ts title="Using isAllOf as a type guard"
-import { isAllOf, PayloadAction } from '@reduxjs/toolkit'
-import { Data, isSpecial, isInteresting } from '@virtual/matchers' // This is a fake pkg that provides the types shown above
+import { isAllOf } from '@reduxjs/toolkit'
+import type { PayloadAction } from '@reduxjs/toolkit'
+import { isSpecial, isInteresting } from '@virtual/matchers' // This is a fake pkg that provides the types shown above
+import type { Data } from '@virtual/matchers' // This is a fake pkg that provides the types shown above
 
 const isSpecialAndInteresting = isAllOf(isSpecial, isInteresting)
 
@@ -252,7 +259,8 @@ function someFunction(action: PayloadAction<Data>) {
 ```
 
 ```ts title="Using isAnyOf as a type guard"
-import { isAnyOf, PayloadAction } from '@reduxjs/toolkit'
+import { isAnyOf } from '@reduxjs/toolkit'
+import type { PayloadAction } from '@reduxjs/toolkit'
 import { Data, isSpecial, isInteresting } from '@virtual/matchers' // this is a fake pkg that provides the types shown above
 
 const isSpecialOrInteresting = isAnyOf(isSpecial, isInteresting)

docs/api/matching-utilities.mdx

@@ -4,7 +4,6 @@
     "@manaflair/redux-batch": "^1.0.0",
     "@types/nanoid": "^2.1.0",
     "@types/react": "^16.9.46",
-    "@types/react-redux": "^7.1.9",
     "@types/redux-logger": "^3.0.8",
     "async-mutex": "^0.3.2",
     "axios": "^0.20.0",