Merge branch 'v2.0-integration' into cdm-tweaks

Author: EskiMojo14

.github/FUNDING.yml

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

.github/workflows/tests.yml

@@ -105,7 +105,7 @@ jobs:
       fail-fast: false
       matrix:
         node: ['16.x']
-        ts: ['4.7', '4.8', '4.9', '5.0']
+        ts: ['4.7', '4.8', '4.9', '5.0', '5.1', '5.2']
     steps:
       - name: Checkout repo
         uses: actions/checkout@v2
@@ -149,16 +149,7 @@ jobs:
       fail-fast: false
       matrix:
         node: ['16.x']
-        example:
-          [
-            'cra4',
-            'cra5',
-            'next',
-            'vite',
-            'node-standard',
-            'node-esm',
-            'are-the-types-wrong',
-          ]
+        example: ['cra4', 'cra5', 'next', 'vite', 'node-standard', 'node-esm']
     defaults:
       run:
         working-directory: ./examples/publish-ci/${{ matrix.example }}
@@ -197,9 +188,27 @@ jobs:
 
       - name: Run test step
         run: yarn test
-        if: matrix.example != 'are-the-types-wrong'
 
-      - name: Run test step (attw)
-        # Ignore "FalseCJS" errors in the `attw` job
-        run: yarn test -n FalseCJS
-        if: matrix.example == 'are-the-types-wrong'
+  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: ['16.x']
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v3
+
+      - uses: actions/download-artifact@v2
+        with:
+          name: package
+          path: packages/toolkit
+
+      - name: show folder
+        run: ls -l .
+
+      - name: Run are-the-types-wrong
+        run: npx @arethetypeswrong/cli ./package.tgz --format table --ignore-rules false-cjs

docs/api/actionCreatorMiddleware.mdx

@@ -63,6 +63,6 @@ const actionCreatorMiddleware = createActionCreatorInvariantMiddleware({
 
 const store = configureStore({
   reducer,
-  middleware: new Tuple(actionCreatorMiddleware),
+  middleware: () => new Tuple(actionCreatorMiddleware),
 })
 ```

docs/api/configureStore.mdx

@@ -9,8 +9,28 @@ 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
 
@@ -80,18 +100,15 @@ If it is an object of slice reducers, like `{users : usersReducer, posts : posts
 
 ### `middleware`
 
-An optional array of Redux middleware functions, or a callback to customise the array of middleware.
+A callback which will receive `getDefaultMiddleware` as its argument,
+and should return a middleware array.
 
-If this option is provided, it should contain all the middleware functions you
+If this option is provided, it should return all the middleware functions you
 want added to the store. `configureStore` will automatically pass those to `applyMiddleware`.
 
 If not provided, `configureStore` will call `getDefaultMiddleware` and use the
 array of middleware functions it returns.
 
-Where you wish to add onto or customize the default middleware,
-you may pass a callback function that will receive `getDefaultMiddleware` as its argument,
-and should return a middleware array.
-
 For more details on how the `middleware` parameter works and the list of middleware that are added by default, see the
 [`getDefaultMiddleware` docs page](./getDefaultMiddleware.mdx).
 
@@ -103,7 +120,7 @@ import { configureStore, Tuple } from '@reduxjs/toolkit'
 
 configureStore({
   reducer: rootReducer,
-  middleware: new Tuple(additionalMiddleware, logger),
+  middleware: () => new Tuple(additionalMiddleware, logger),
 })
 ```
 
@@ -158,11 +175,6 @@ If you provide an array, this `applyMiddleware` enhancer will _not_ be used.
 `configureStore` will warn in console if any middleware are provided (or left as default) but not included in the final list of enhancers.
 
 ```ts no-transpile
-// warns - middleware left as default but not included in final enhancers
-configureStore({
-  reducer,
-  enhancers: [offline(offlineConfig)],
-})
 // warns - middleware customised but not included in final enhancers
 configureStore({
   reducer,
@@ -179,8 +191,8 @@ configureStore({
 // also allowed
 configureStore({
   reducer,
-  middleware: [],
-  enhancers: [offline(offlineConfig)],
+  middleware: () => [],
+  enhancers: ()  => [offline(offlineConfig)],
 })
 ```
 
@@ -189,20 +201,22 @@ configureStore({
 :::note Tuple
 Typescript users are required to use a `Tuple` instance (if not using a `getDefaultEnhancer` result, which is already a `Tuple`), for better inference.
 
+```
 import { configureStore, Tuple } from '@reduxjs/toolkit'
 
 configureStore({
 reducer: rootReducer,
-enhancers: new Tuple(offline),
+enhancers: () => new Tuple(offline),
 })
 
-````
+```
 
 Javascript-only users are free to use a plain array if preferred.
 
 :::
 
 ## Usage
+
 ### Basic Example
 
 ```ts
@@ -218,7 +232,7 @@ import rootReducer from './reducers'
 
 const store = configureStore({ reducer: rootReducer })
 // The store now has redux-thunk added and the Redux DevTools Extension is turned on
-````
+```
 
 ### Full Example
 

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'
@@ -142,7 +142,6 @@ The main benefit of this is that you can create [async thunks](./createAsyncThun
 
 ```ts title="Creator callback for reducers"
 import { createSlice, nanoid } from '@reduxjs/toolkit'
-import type { PayloadAction } from '@reduxjs/toolkit'
 
 interface Item {
   id: string
@@ -161,7 +160,7 @@ const todosSlice = createSlice({
     todos: [],
   } as TodoState,
   reducers: (create) => ({
-    deleteTodo: create.reducer((state, action: PayloadAction<number>) => {
+    deleteTodo: create.reducer<number>((state, action) => {
       state.todos.splice(action.payload, 1)
     }),
     addTodo: create.preparedReducer(
@@ -209,7 +208,7 @@ A standard slice case reducer.
 - **reducer** The slice case reducer to use.
 
 ```ts no-transpile
-create.reducer((state, action: PayloadAction<Todo>) => {
+create.reducer<Todo>((state, action) => {
   state.todos.push(action.payload)
 })
 ```
@@ -322,16 +321,17 @@ reducers: (create) => {
 
 ### `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.
+
+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.
+
+**`extraReducers` allows `createSlice` to respond and update its own state in response to other action types besides the types it has generated.**
 
-As case reducers specified with `extraReducers` are meant to reference "external" actions, they will not have actions generated in `slice.actions`.
+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).
 
-As with `reducers`, these case reducers will also be passed to `createReducer` and may "mutate" their state safely.
+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.
+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
 
@@ -373,6 +373,7 @@ const counterSlice = createSlice({
 })
 ```
 
+<<<<<<< HEAD
 This cycle can be fixed by providing an explicit return type for the selector:
 
 ```ts no-transpile
@@ -418,6 +419,10 @@ const counterSlice = createSlice({
 
 :::
 
+=======
+
+> > > > > > > master
+
 ## Return Value
 
 `createSlice` will return an object that looks like:

docs/api/getDefaultMiddleware.mdx

@@ -28,7 +28,7 @@ If you want to customize the list of middleware, you can supply an array of midd
 ```js
 const store = configureStore({
   reducer: rootReducer,
-  middleware: new Tuple(thunk, logger),
+  middleware: () => new Tuple(thunk, logger),
 })
 
 // Store specifically has the thunk and logger middleware applied

docs/api/immutabilityMiddleware.mdx

@@ -86,7 +86,7 @@ const immutableInvariantMiddleware = createImmutableStateInvariantMiddleware({
 const store = configureStore({
   reducer: exampleSliceReducer,
   // Note that this will replace all default middleware
-  middleware: new Tuple(immutableInvariantMiddleware),
+  middleware: () => new Tuple(immutableInvariantMiddleware),
 })
 ```
 

docs/api/matching-utilities.mdx

@@ -42,9 +42,9 @@ As of Redux 5.0, action types are _required_ to be a string.
 A higher-order function that accepts one or more of:
 
 - `redux-toolkit` action creator functions such as the ones produced by:
-  - [`createAction`](./createAction)
-  - [`createSlice`](./createSlice#return-value)
-  - [`createAsyncThunk`](./createAsyncThunk#promise-lifecycle-actions)
+  - [`createAction`](./createAction.mdx)
+  - [`createSlice`](./createSlice.mdx#return-value)
+  - [`createAsyncThunk`](./createAsyncThunk.mdx#promise-lifecycle-actions)
 - type guard functions
 - custom action creator functions that have a `.match` property that is a type guard
 
@@ -56,7 +56,7 @@ Accepts the same inputs as `isAllOf` and will return a type guard function that
 
 ## `isAsyncThunkAction`
 
-A higher-order function that returns a type guard function that may be used to check whether an action was created by [`createAsyncThunk`](./createAsyncThunk).
+A higher-order function that returns a type guard function that may be used to check whether an action was created by [`createAsyncThunk`](./createAsyncThunk.mdx).
 
 ```ts title="isAsyncThunkAction usage"
 import { isAsyncThunkAction } from '@reduxjs/toolkit'
@@ -128,7 +128,7 @@ function handleRejectedAction(action: UnknownAction) {
 
 ## `isRejectedWithValue`
 
-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).
+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.mdx#handling-thunk-errors).
 
 ```ts title="isRejectedWithValue usage"
 import { isRejectedWithValue } from '@reduxjs/toolkit'

docs/api/serializabilityMiddleware.mdx

@@ -111,7 +111,7 @@ const serializableMiddleware = createSerializableStateInvariantMiddleware({
 
 const store = configureStore({
   reducer,
-  middleware: new Tuple(serializableMiddleware),
+  middleware: () => new Tuple(serializableMiddleware),
 })
 ```
 

docs/rtk-query/api/createApi.mdx

@@ -508,7 +508,7 @@ See also [Invalidating cache data](../usage/automated-refetching.mdx#invalidatin
 
 _(optional, only for query endpoints)_
 
-Overrides the api-wide definition of `keepUnusedDataFor` for this endpoint only.a
+Overrides the api-wide definition of `keepUnusedDataFor` for this endpoint only.
 
 [summary](docblock://query/createApi.ts?token=CreateApiOptions.keepUnusedDataFor)