Merge branch 'master' into combineslices-example

Author: EskiMojo14

.codesandbox/ci.json

@@ -2,7 +2,6 @@
   "sandboxes": [
     "vanilla",
     "vanilla-ts",
-    "github/reduxjs/rtk-github-issues-example",
     "/examples/query/react/basic",
     "/examples/query/react/advanced",
     "/examples/action-listener/counter",

.github/workflows/tests.yml

@@ -106,7 +106,7 @@ jobs:
       fail-fast: false
       matrix:
         node: ['20.x']
-        ts: ['4.7', '4.8', '4.9', '5.0', '5.1', '5.2', '5.3']
+        ts: ['4.7', '4.8', '4.9', '5.0', '5.1', '5.2', '5.3', '5.4']
     steps:
       - name: Checkout repo
         uses: actions/checkout@v4

docs/api/createSlice.mdx

@@ -353,7 +353,7 @@ reducers: (create) => {
 
 ### `extraReducers`
 
-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.
+Conceptually, each slice reducer "owns" its slice of state. There's also a natural correspondence 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.
 

docs/rtk-query/api/created-api/hooks.mdx

@@ -370,7 +370,7 @@ selectFromResult: () => ({})
   - `trigger`: A function that triggers an update to the data based on the provided argument. The trigger function returns a promise with the properties shown above that may be used to handle the behavior of the promise
   - `mutationState`: A query status object containing the current loading state and metadata about the request, or the values returned by the `selectFromResult` option where applicable.
     Additionally, this object will contain
-    - a `reset` method to reset the hook back to it's original state and remove the current result from the cache
+    - a `reset` method to reset the hook back to its original state and remove the current result from the cache
     - an `originalArgs` property that contains the argument passed to the last call of the `trigger` function.
 
 #### Description

docs/rtk-query/api/fetchBaseQuery.mdx

@@ -336,7 +336,7 @@ export const api = createApi({
       query: () => ({
         url: `users`,
         // Example: we know the users endpoint is _really fast_ because it's always cached.
-        // We can assume if its over > 1000ms, something is wrong and we should abort the request.
+        // We can assume if it's over > 1000ms, something is wrong and we should abort the request.
         timeout: 1000,
       }),
     }),

docs/rtk-query/usage-with-typescript.mdx

@@ -593,7 +593,7 @@ When using `fetchBaseQuery`, the `error` property returned from a hook will have
 If an error is present, you can access error properties after narrowing the type to either `FetchBaseQueryError` or `SerializedError`.
 
 ```tsx no-transpile
-import { api } from './services/api'
+import { usePostsQuery } from './services/api'
 
 function PostDetail() {
   const { data, error, isLoading } = usePostsQuery()
@@ -613,10 +613,9 @@ function PostDetail() {
           <div>{errMsg}</div>
         </div>
       )
-    } else {
-      // you can access all properties of `SerializedError` here
-      return <div>{error.message}</div>
-    }
+    } 
+    // you can access all properties of `SerializedError` here
+    return <div>{error.message}</div>
   }
 
   if (data) {

docs/rtk-query/usage/code-generation.mdx

@@ -119,6 +119,8 @@ export type EndpointMatcherFunction = (
 #### Filtering endpoints
 
 If you only want to include a few endpoints, you can use the `filterEndpoints` config option to filter your endpoints.
+Note that endpoints are transformed to camel case. For example, `login_user` will become `loginUser`. 
+`filterEndpoints` will be checked against this camel case version of the endpoint.
 
 ```ts no-transpile title="openapi-config.ts"
 const filteredConfig: ConfigFile = {

docs/rtk-query/usage/mutations.mdx

@@ -118,7 +118,7 @@ Below are some of the most frequently used properties on the "mutation result" o
 - `isLoading` - When true, indicates that the mutation has been fired and is awaiting a response.
 - `isSuccess` - When true, indicates that the last mutation fired has data from a successful request.
 - `isError` - When true, indicates that the last mutation fired resulted in an error state.
-- `reset` - A method to reset the hook back to it's original state and remove the current result from the cache
+- `reset` - A method to reset the hook back to its original state and remove the current result from the cache
 
 :::note
 

docs/tutorials/quick-start.mdx

@@ -49,7 +49,7 @@ npm install @reduxjs/toolkit react-redux
 
 Create a file named `src/app/store.js`. Import the `configureStore` API from Redux Toolkit. We'll start by creating an empty Redux store, and exporting it:
 
-```ts title="app/store.js"
+```ts title="app/store.ts"
 import { configureStore } from '@reduxjs/toolkit'
 
 export const store = configureStore({
@@ -303,4 +303,4 @@ Here's the complete counter application as a running CodeSandbox:
 
 ## What's Next?
 
-We recommend going through [**the "Redux Essentials" and "Redux Fundamentals" tutorials in the Redux core docs**](https://redux.js.org/tutorials/index), which will give you a complete understanding of how Redux works, what Redux Toolkit does, and how to use it correctly.
+We recommend going through [**the "Redux Essentials" and "Redux Fundamentals" tutorials in the Redux core docs**](https://redux.js.org/tutorials/index), which will give you a complete understanding of how Redux works, what Redux Toolkit does, and how to use it correctly.

docs/usage/usage-with-typescript.md

@@ -724,20 +724,46 @@ Import and use that pre-typed `createAppAsyncThunk` instead of the original, and
 
 ## `createEntityAdapter`
 
-Typing `createEntityAdapter` only requires you to specify the entity type as the single generic argument.
+Usage of `createEntityAdapter` with Typescript varies based on whether your entities are normalized by an `id` property, or whether a custom `selectId` is needed.
 
-The example from the `createEntityAdapter` documentation would look like this in TypeScript:
+If your entities are normalized by an `id` property, `createEntityAdapter` only requires you to specify the entity type as the single generic argument. For example:
 
 ```ts
 interface Book {
-  bookId: number
+  id: number
   title: string
-  // ...
 }
 
+// no selectId needed here, as the entity has an `id` property we can default to
 // highlight-next-line
 const booksAdapter = createEntityAdapter<Book>({
-  selectId: (book) => book.bookId,
+  sortComparer: (a, b) => a.title.localeCompare(b.title),
+})
+
+const booksSlice = createSlice({
+  name: 'books',
+  initialState: booksAdapter.getInitialState(),
+  reducers: {
+    bookAdded: booksAdapter.addOne,
+    booksReceived(state, action: PayloadAction<{ books: Book[] }>) {
+      booksAdapter.setAll(state, action.payload.books)
+    },
+  },
+})
+```
+
+On the other hand, if the entity needs to be normalized by a different property, we instead recommend passing a custom `selectId` function and annotating there. This allows proper inference of the ID's type, instead of having to provide it manually.
+
+```ts
+interface Book {
+  bookId: number
+  title: string
+  // ...
+}
+
+const booksAdapter = createEntityAdapter({
+  // highlight-next-line
+  selectId: (book: Book) => book.bookId,
   sortComparer: (a, b) => a.title.localeCompare(b.title),
 })