Merge pull request #2401 from reduxjs/v1.9-integration

.github/workflows/tests.yml

@@ -96,7 +96,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']
+ ts: ['4.1', '4.2', '4.3', '4.4', '4.5', '4.6', '4.7', '4.8', '4.9.2-rc']
  steps:
  - name: Checkout repo
  uses: actions/checkout@v2
@@ -123,10 +123,6 @@ jobs:
 
  - run: sed -i -e /@remap-prod-remove-line/d ./tsconfig.base.json ./jest.config.js ./src/tests/*.* ./src/query/tests/*.*
 
- - name: "@ts-ignore stuff that didn't exist pre-4.1 in the tests"
- if: ${{ matrix.ts < 4.1 }}
- run: sed -i -e 's/@pre41-ts-ignore/@ts-ignore/' -e '/pre41-remove-start/,/pre41-remove-end/d' ./src/tests/*.* ./src/query/tests/*.ts*
-
  - name: Test types
  run: |
  yarn tsc --version

.prettierignore

@@ -1,3 +1,4 @@
 **/dist/**
 **/etc/**
-**/temp/**
+**/temp/**
+**/__testfixtures__/**

.yarn/patches/msw-npm-0.40.2-2107d48752

@@ -0,0 +1,20 @@
+diff --git a/lib/types/context/set.d.ts b/lib/types/context/set.d.ts
+index 266229bad706ec49392b8b87e18560c1566b490d..4fad485f8ffec2db92e808a05ccd9274414a9bd9 100644
+--- a/lib/types/context/set.d.ts
++++ b/lib/types/context/set.d.ts
+@@ -15,4 +15,5 @@ export declare type ForbiddenHeaderError<HeaderName extends string> = `SafeRespo
+ * })
+ * @see {@link https://mswjs.io/docs/api/context/set `ctx.set()`}
+ */
++// @ts-ignore
+ export declare function set<N extends string | HeadersObject>(...args: N extends string ? Lowercase<N> extends ForbiddenHeaderNames ? ForbiddenHeaderError<N> : [N, string] : N extends HeadersObject<infer CookieName> ? Lowercase<CookieName> extends ForbiddenHeaderNames ? ForbiddenHeaderError<CookieName> : [N] : [N]): ResponseTransformer;
+diff --git a/lib/types/sharedOptions.d.ts b/lib/types/sharedOptions.d.ts
+index d1d6e05df2dc2c29f06d8d0b91c500a10e651a29..3d8c29fd2089b2abf21d78cd277aac9271e781c2 100644
+--- a/lib/types/sharedOptions.d.ts
++++ b/lib/types/sharedOptions.d.ts
+@@ -21,4 +21,5 @@ export interface LifeCycleEventsMap<ResponseType> {
+ 'response:bypass': (response: ResponseType, requestId: string) => void;
+ unhandledException: (error: Error, request: MockedRequest) => void;
+ }
++// @ts-ignore
+ export declare type LifeCycleEventEmitter<ResponseType> = Pick<StrictEventEmitter<ResponseType>, 'on' | 'removeListener' | 'removeAllListeners'>;

.yarnrc.yml

@@ -2,8 +2,8 @@ nodeLinker: node-modules
 
 plugins:
  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
- spec: "@yarnpkg/plugin-workspace-tools"
+ spec: '@yarnpkg/plugin-workspace-tools'
  - path: .yarn/plugins/@yarnpkg/plugin-version.cjs
- spec: "@yarnpkg/plugin-version"
+ spec: '@yarnpkg/plugin-version'
 
-yarnPath: .yarn/releases/yarn-3.1.0.cjs
+yarnPath: .yarn/releases/yarn-3.2.4.cjs

docs/api/autoBatchEnhancer.mdx

@@ -0,0 +1,143 @@
+---
+id: autoBatchEnhancer
+title: autoBatchEnhancer
+sidebar_label: autoBatchEnhancer
+hide_title: true
+---
+
+ 
+
+# `autoBatchEnhancer`
+
+A Redux store enhancer that looks for one or more "low-priority" dispatched actions in a row, and queues a callback to run subscriber notifications on a delay. It then notifies subscribers either when the queued callback runs, or when the next "normal-priority" action is dispatched, whichever is first.
+
+## Basic Usage
+
+```ts
+import {
+ createSlice,
+ configureStore,
+ autoBatchEnhancer,
+ prepareAutoBatched,
+} from '@reduxjs/toolkit'
+
+interface CounterState {
+ value: number
+}
+
+const counterSlice = createSlice({
+ name: 'counter',
+ initialState: { value: 0 } as CounterState,
+ reducers: {
+ incrementBatched: {
+ // Batched, low-priority
+ reducer(state) {
+ state.value += 1
+ },
+ // highlight-start
+ // Use the `prepareAutoBatched` utility to automatically
+ // add the `action.meta[SHOULD_AUTOBATCH]` field the enhancer needs
+ prepare: prepareAutoBatched<void>(),
+ // highlight-end
+ },
+ // Not batched, normal priority
+ decrementUnbatched(state) {
+ state.value -= 1
+ },
+ },
+})
+const { incrementBatched, decrementUnbatched } = counterSlice.actions
+
+const store = configureStore({
+ reducer: counterSlice.reducer,
+ // highlight-start
+ enhancers: (existingEnhancers) => {
+ // Add the autobatch enhancer to the store setup
+ return existingEnhancers.concat(autoBatchEnhancer())
+ },
+ // highlight-end
+})
+```
+
+## API
+
+### `autoBatchEnhancer`
+
+```ts title="autoBatchEnhancer signature" no-transpile
+export type SHOULD_AUTOBATCH = string
+type AutoBatchOptions =
+ | { type: 'tick' }
+ | { type: 'timer'; timeout: number }
+ | { type: 'raf' }
+ | { type: 'callback'; queueNotification: (notify: () => void) => void }
+
+export type autoBatchEnhancer = (options?: AutoBatchOptions) => StoreEnhancer
+```
+
+Creates a new instance of the autobatch store enhancer.
+
+Any action that is tagged with `action.meta[SHOULD_AUTOBATCH] = true` will be treated as "low-priority", and a notification callback will be queued. The enhancer will delay notifying subscribers until either:
+
+- The queued callback runs and triggers the notifications
+- A "normal-priority" action (any action _without_ `action.meta[SHOULD_AUTOBATCH] = true`) is dispatched in the same tick
+
+`autoBatchEnhancer` accepts options to configure how the notification callback is queued:
+
+- `{type: 'raf'}`: queues using `requestAnimationFrame` (default)
+- `{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
+
+The default behavior is to queue the notifications using `requestAnimationFrame`.
+
+The `SHOULD_AUTOBATCH` value is meant to be opaque - it's currently a string for simplicity, but could be a `Symbol` in the future.
+
+### `prepareAutoBatched`
+
+```ts title="prepareAutoBatched signature" no-transpile
+type prepareAutoBatched = <T>() => (payload: T) => { payload: T; meta: unknown }
+```
+
+Creates a function that accepts a `payload` value, and returns an object with `{payload, meta: {[SHOULD_AUTOBATCH]: true}}`. This is meant to be used with RTK's `createSlice` and its "`prepare` callback" syntax:
+
+```ts no-transpile
+createSlice({
+ name: 'todos',
+ initialState,
+ reducers: {
+ todoAdded: {
+ reducer(state, action: PayloadAction<Todo>) {
+ state.push(action.payload)
+ },
+ // highlight-start
+ prepare: prepareAutoBatched<Todo>(),
+ // highlight-end
+ },
+ },
+})
+```
+
+## Batching Approach and Background
+
+The post [A Comparison of Redux Batching Techniques](https://blog.isquaredsoftware.com/2020/01/blogged-answers-redux-batching-techniques/) describes four different approaches for "batching Redux actions/dispatches"
+
+- a higher-order reducer that accepts multiple actions nested inside one real action, and iterates over them together
+- an enhancer that wraps `dispatch` and debounces the notification callback
+- an enhancer that wraps `dispatch` to accept an array of actions
+- React's `unstable_batchedUpdates()`, which just combines multiple queued renders into one but doesn't affect subscriber notifications
+
+This enhancer is a variation of the "debounce" approach, but with a twist.
+
+Instead of _just_ debouncing _all_ subscriber notifications, it watches for any actions with a specific `action.meta[SHOULD_AUTOBATCH]: true` field attached.
+
+When it sees an action with that field, it queues a callback. The reducer is updated immediately, but the enhancer does _not_ notify subscribers right way. If other actions with the same field are dispatched in succession, the enhancer will continue to _not_ notify subscribers. Then, when the queued callback runs, it finally notifies all subscribers, similar to how React batches re-renders.
+
+The additional twist is also inspired by React's separation of updates into "low-priority" and "immediate" behavior (such as a render queued by an AJAX request vs a render queued by a user input that should be handled synchronously).
+
+If some low-pri actions have been dispatched and a notification microtask is queued, then a _normal_ priority action (without the field) is dispatched, the enhancer will go ahead and notify all subscribers synchronously as usual, and _not_ notify them at the end of the tick.
+
+This allows Redux users to selectively tag certain actions for effective batching behavior, making this purely opt-in on a per-action basis, while retaining normal notification behavior for all other actions.
+
+### RTK Query and Batching
+
+RTK Query already marks several of its key internal action types as batchable. If you add the `autoBatchEnhancer` to the store setup, it will improve the overall UI performance, especially when rendering large lists of components that use the RTKQ query hooks.

docs/api/codemods.mdx

@@ -0,0 +1,77 @@
+---
+id: codemods
+title: Codemods
+sidebar_label: Codemods
+hide_title: true
+---
+
+ 
+
+# Codemods
+
+Per [the description in `1.9.0-alpha.0`](https://github.com/reduxjs/redux-toolkit/releases/tag/v1.9.0-alpha.0), we plan to remove the "object" argument from `createReducer` and `createSlice.extraReducers` in the future RTK 2.0 major version. In `1.9.0-alpha.0`, we added a one-shot runtime warning to each of those APIs.
+
+To simplify upgrading codebases, we've published a set of codemods that will automatically transform the deprecated "object" syntax into the equivalent "builder" syntax.
+
+The codemods package is available on NPM as [**`@reduxjs/rtk-codemods`**](https://www.npmjs.com/package/@reduxjs/rtk-codemods). It currently contains two codemods: `createReducerBuilder` and `createSliceBuilder`.
+
+To run the codemods against your codebase, run `npx @reduxjs/rtk-codemods <TRANSFORM NAME> path/of/files/ or/some**/*glob.js`.
+
+Examples:
+
+```bash
+npx @reduxjs/rtk-codemods createReducerBuilder ./src
+
+npx @reduxjs/rtk-codemods createSliceBuilder ./packages/my-app/**/*.ts
+```
+
+We also recommend re-running Prettier on the codebase before committing the changes.
+
+**These codemods _should_ work, but we would greatly appreciate testing and feedback on more real-world codebases!**
+
+Before:
+
+```js
+createReducer(initialState, {
+ [todoAdded1a]: (state, action) => {
+ // stuff
+ },
+ [todoAdded1b]: (state, action) => action.payload,
+})
+
+const slice1 = createSlice({
+ name: 'a',
+ initialState: {},
+ extraReducers: {
+ [todoAdded1a]: (state, action) => {
+ // stuff
+ },
+ [todoAdded1b]: (state, action) => action.payload,
+ },
+})
+```
+
+After:
+
+```js
+createReducer(initialState, (builder) => {
+ builder.addCase(todoAdded1a, (state, action) => {
+ // stuff
+ })
+
+ builder.addCase(todoAdded1b, (state, action) => action.payload)
+})
+
+const slice1 = createSlice({
+ name: 'a',
+ initialState: {},
+
+ extraReducers: (builder) => {
+ builder.addCase(todoAdded1a, (state, action) => {
+ // stuff
+ })
+
+ builder.addCase(todoAdded1b, (state, action) => action.payload)
+ },
+})
+```

docs/package.json

@@ -3,7 +3,7 @@
  "devDependencies": {
  "@manaflair/redux-batch": "^1.0.0",
  "@types/nanoid": "^2.1.0",
- "@types/react": "^16.9.46",
+ "@types/react": "^18.0",
  "@types/redux-logger": "^3.0.8",
  "async-mutex": "^0.3.2",
  "axios": "^0.20.0",