upcoming: RTK 1.5.0 (#813)

Co-authored-by: Lenz Weber <[email protected]>
Co-authored-by: Mark Erikson <[email protected]>
Co-authored-by: Matt Sutkowski <[email protected]>
Co-authored-by: Douglas Treadwell <[email protected]>

Author: 4 people

.github/workflows/tests.yml

@@ -0,0 +1,89 @@
+name: CI
+on: [push, pull_request]
+jobs:
+  build:
+    name: Lint, Test, Build & Pack on Node ${{ matrix.node }}
+
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node: ['12.x']
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v2
+
+      - name: Use node ${{ matrix.node }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node }}
+
+      - uses: c-hive/gha-npm-cache@v1
+
+      - name: Install deps
+        run: npm ci --ignore-scripts
+
+      - name: Pack (including Prepare)
+        run: npm pack
+
+      - uses: actions/upload-artifact@v2
+        with:
+          name: package
+          path: reduxjs-toolkit*.tgz
+
+  test:
+    name: Test Types with TypeScript ${{ matrix.ts }}
+
+    needs: [build]
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        node: ['12.x']
+        ts: ['3.5', '3.6', '3.7', '3.8', '3.9', '4.0', '4.1', 'next']
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v2
+
+      - name: Use node ${{ matrix.node }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node }}
+
+      - uses: c-hive/gha-npm-cache@v1
+
+      - name: Install deps
+        run: npm ci --ignore-scripts
+
+      - name: Install TypeScript ${{ matrix.ts }}
+        run: npm install typescript@${{ matrix.ts }} --ignore-scripts
+
+      - uses: actions/download-artifact@v2
+        with:
+          name: package
+
+      - name: Unpack build artifact to dist
+        run: tar -xzvf reduxjs-toolkit-1.4.0.tgz --strip-components=1 package/dist
+
+      - name: Remap @redux/toolkit from src to dist
+        run: |
+          sed -i -e 's|@reduxjs/toolkit": \["./src"\]|@reduxjs/toolkit": ["."]|' ./type-tests/files/tsconfig.json
+
+      - name: Prefix `freeze` re-export for pre-3.7 TS versions with @ts-ignore
+        if: ${{ matrix.ts < 3.7 }}
+        run: |
+          sed -i -e "/import .* freeze .* from 'immer'/s/^/\/\/ @ts-ignore\n/" dist/typings.d.ts
+          sed -i -e "/export .* freeze .* from 'immer'/s/^/\/\/ @ts-ignore\n/" src/index.ts
+
+      - name: Use typings-tester for old TS versions
+        if: ${{ matrix.ts < 3.9 }}
+        run: |
+          sed -i -e 's/"cd type-tests.*"/"npm run test type-tests"/' package.json
+          sed -i -e 's/@ts-expect-error/typings:expect-error/' type-tests/files/*.typetest.ts
+          sed -i -e 's/@ts-expect-error/@ts-ignore/' type-tests/files/*.ts
+          mv type-tests/types.test.disabled.ts type-tests/types.test.ts
+
+      - name: Test types
+        run: |
+          ./node_modules/.bin/tsc --version
+          npm run type-tests

.travis.yml

@@ -4,11 +4,46 @@ env:
   - TYPESCRIPT_VERSION=next
   - TYPESCRIPT_VERSION=4.0
   - TYPESCRIPT_VERSION=3.9
-  - TYPESCRIPT_VERSION=3.8
-  - TYPESCRIPT_VERSION=3.7
-  - TYPESCRIPT_VERSION=3.6
-  - TYPESCRIPT_VERSION=3.5
 install:
   - npm ci --ignore-scripts
   - npm install typescript@$TYPESCRIPT_VERSION
 script: npm run prepare
+
+jobs:
+  include:
+    - env:
+        - TYPESCRIPT_VERSION=3.8
+      install:
+        - npm ci --ignore-scripts
+        - npm install typescript@$TYPESCRIPT_VERSION
+        - sed -i -e 's/"cd type-tests.*"/"true"/' package.json
+        - sed -i -e 's/@ts-expect-error/typings:expect-error/' type-tests/files/*
+        - mv type-tests/types.test.disabled.ts type-tests/types.test.ts
+      script: npm run prepare
+    - env:
+        - TYPESCRIPT_VERSION=3.7
+      install:
+        - npm ci --ignore-scripts
+        - npm install typescript@$TYPESCRIPT_VERSION
+        - sed -i -e 's/"cd type-tests.*"/"true"/' package.json
+        - sed -i -e 's/@ts-expect-error/typings:expect-error/' type-tests/files/*
+        - mv type-tests/types.test.disabled.ts type-tests/types.test.ts
+      script: npm run prepare
+    - env:
+        - TYPESCRIPT_VERSION=3.6
+      install:
+        - npm ci --ignore-scripts
+        - npm install typescript@$TYPESCRIPT_VERSION
+        - sed -i -e 's/"cd type-tests.*"/"true"/' package.json
+        - sed -i -e 's/@ts-expect-error/typings:expect-error/' type-tests/files/*
+        - mv type-tests/types.test.disabled.ts type-tests/types.test.ts
+      script: npm run prepare
+    - env:
+        - TYPESCRIPT_VERSION=3.5
+      install:
+        - npm ci --ignore-scripts
+        - npm install typescript@$TYPESCRIPT_VERSION
+        - sed -i -e 's/"cd type-tests.*"/"true"/' package.json
+        - sed -i -e 's/@ts-expect-error/typings:expect-error/' type-tests/files/*
+        - mv type-tests/types.test.disabled.ts type-tests/types.test.ts
+      script: npm run prepare

docs/api/createAction.mdx

@@ -145,7 +145,7 @@ Every generated actionCreator has a `.match(action)` method that can be used to
 
 This has different uses:
 
-### As a TypeScript TypeGuard
+### As a TypeScript Type Guard
 
 This `match` method is a [TypeScript type guard](https://www.typescriptlang.org/docs/handbook/advanced-types.html#user-defined-type-guards) and can be used to discriminate the `payload` type of an action.
 

docs/api/createAsyncThunk.mdx

@@ -234,7 +234,7 @@ const onClick = () => {
 
 The thunks generated by `createAsyncThunk` **will always return a resolved promise** with either the `fulfilled` action object or `rejected` action object inside, as appropriate.
 
-The calling logic may wish to treat these actions as if they were the original promise contents. Redux Toolkit exports an `unwrapResult` function that can be used to extract the `payload` or `error` from the action, and return or throw the result appropriately:
+The calling logic may wish to treat these actions as if they were the original promise contents. Redux Toolkit exports an `unwrapResult` function that can be used to extract the `payload` of a `fulfilled` action or to throw either the `error` or, if available, `payload` created by `rejectWithValue` from a `rejected` action:
 
 ```js
 import { unwrapResult } from '@reduxjs/toolkit'
@@ -244,7 +244,7 @@ const onClick = () => {
   dispatch(fetchUserById(userId))
     .then(unwrapResult)
     .then(originalPromiseResult => {})
-    .catch(serializedError => {})
+    .catch(rejectedValueOrSerializedError => {})
 }
 ```
 
@@ -437,7 +437,7 @@ const fetchUserById = createAsyncThunk(
 - Requesting a user by ID, with loading state, and only one request at a time:
 
 ```js
-import { createAsyncThunk, createSlice, unwrapResult } from '@reduxjs/toolkit'
+import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
 import { userAPI } from './userAPI'
 
 const fetchUserById = createAsyncThunk(
@@ -494,7 +494,7 @@ const UsersComponent = () => {
   const fetchOneUser = async userId => {
     try {
       const resultAction = await dispatch(fetchUserById(userId))
-      const user = unwrapResult(resultAction)
+      const user = resultAction.payload
       showToast('success', `Fetched ${user.name}`)
     } catch (err) {
       showToast('error', `Fetch failed: ${err.message}`)

docs/api/createSelector.mdx

@@ -19,3 +19,44 @@ For more details on using `createSelector`, see:
 > **Note**: Prior to v0.7, RTK re-exported `createSelector` from [`selectorator`](https://github.com/planttheidea/selectorator), which
 > allowed using string keypaths as input selectors. This was removed, as it ultimately did not provide enough benefits, and
 > the string keypaths made static typing for selectors difficult.
+
+# `createDraftSafeSelector`
+
+In general, we recommend against using selectors inside of reducers:
+
+- Selectors typically expect the entire Redux state object as an argument, while slice reducers only have access to a specific subset of the entire Redux state
+- Reselect's `createSelector` relies on reference comparisons to determine if inputs have changed, and if an Immer Proxy-wrapped draft value is passed in to a selector, the selector may see the same reference and think nothing has changed.
+
+However, some users have requested the ability to create selectors that will work correctly inside of Immer-powered reducers. One use case for this might be collecting an ordered set of items when using `createEntityAdapter, such as`const orderedTodos = todosSelectors.selectAll(todosState)`, and then using`orderedTodos` in the rest of the reducer logic.
+
+Besides re-exporting `createSelector`, RTK also exports a wrapped version of `createSelector` named `createDraftSafeSelector` that allows you to create selectors that can safely be used inside of `createReducer` and `createSlice` reducers with Immer-powered mutable logic. When used with plain state values, the selector will still memoize normally based on the inputs. But, when used with Immer draft values, the selector will err on the side of recalculating the results, just to be safe.
+
+All selectors created by `entityAdapter.getSelectors` are "draft safe" selectors by default.
+
+Example:
+
+```js
+const selectSelf = (state: State) => state
+const unsafeSelector = createSelector(selectSelf, state => state.value)
+const draftSafeSelector = createDraftSafeSelector(
+  selectSelf,
+  state => state.value
+)
+
+// in your reducer:
+
+state.value = 1
+
+const unsafe1 = unsafeSelector(state)
+const safe1 = draftSafeSelector(state)
+
+state.value = 2
+
+const unsafe2 = unsafeSelector(state)
+const safe2 = draftSafeSelector(state)
+```
+
+After executing that, `unsafe1` and `unsafe2` will be of the same value, because the memoized selector was
+executed on the same object - but `safe2` will actually be different from `safe1` (with the updated value of `2`),
+because the safe selector detected that it was executed on a Immer draft object and recalculated using the current
+value instead of returning a cached value.