Merge branch 'master' of https://github.com/reduxjs/redux-toolkit into configs

Author: aryaemami59

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/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/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),
 })
 

packages/toolkit/src/query/core/buildThunks.ts

@@ -515,7 +515,7 @@ In the case of an unhandled error, no tags will be "provided" or "invalidated".`
       arg.forceRefetch ?? (arg.subscribe && baseFetchOnMountOrArgChange)
 
     if (refetchVal) {
-      // Return if its true or compare the dates because it must be a number
+      // Return if it's true or compare the dates because it must be a number
       return (
         refetchVal === true ||
         (Number(new Date()) - Number(fulfilledVal)) / 1000 >= refetchVal

packages/toolkit/src/query/endpointDefinitions.ts

@@ -136,7 +136,7 @@ interface EndpointDefinitionWithQueryFn<
    *         if (randomVal < 0.9) {
    *           return { data: 'tails' }
    *         }
-   *         return { error: { status: 500, statusText: 'Internal Server Error', data: "Coin landed on it's edge!" } }
+   *         return { error: { status: 500, statusText: 'Internal Server Error', data: "Coin landed on its edge!" } }
    *       }
    *       // highlight-end
    *     })

packages/toolkit/src/query/react/buildHooks.ts

@@ -53,12 +53,27 @@ import { useStableQueryArgs } from './useSerializedStableValue'
 import { useShallowStableValue } from './useShallowStableValue'
 
 // Copy-pasted from React-Redux
+const canUseDOM = () =>
+  !!(
+    typeof window !== 'undefined' &&
+    typeof window.document !== 'undefined' &&
+    typeof window.document.createElement !== 'undefined'
+  )
+
+const isDOM = /* @__PURE__ */ canUseDOM()
+
+// Under React Native, we know that we always want to use useLayoutEffect
+
+const isRunningInReactNative = () =>
+  typeof navigator !== 'undefined' && navigator.product === 'ReactNative'
+
+const isReactNative = /* @__PURE__ */ isRunningInReactNative()
+
+const getUseIsomorphicLayoutEffect = () =>
+  isDOM || isReactNative ? useLayoutEffect : useEffect
+
 export const useIsomorphicLayoutEffect =
-  typeof window !== 'undefined' &&
-  !!window.document &&
-  !!window.document.createElement
-    ? useLayoutEffect
-    : useEffect
+  /* @__PURE__ */ getUseIsomorphicLayoutEffect()
 
 export interface QueryHooks<
   Definition extends QueryDefinition<any, any, any, any, any>,
@@ -521,7 +536,7 @@ export type UseMutationStateResult<
 > = TSHelpersNoInfer<R> & {
   originalArgs?: QueryArgFrom<D>
   /**
-   * Resets the hook state to it's initial `uninitialized` state.
+   * Resets the hook state to its initial `uninitialized` state.
    * This will also remove the last result from the cache.
    */
   reset: () => void