Remove reducer object notation docs examples

Author: markerikson

docs/api/createAsyncThunk.mdx

@@ -210,27 +210,14 @@ type RejectedWithValue = <ThunkArg, RejectedValue>(
 ) => RejectedWithValueAction<ThunkArg, RejectedValue>
 ```
 
-To handle these actions in your reducers, reference the action creators in `createReducer` or `createSlice` using either the object key notation or the "builder callback" notation. (Note that if you use TypeScript, you [should use the "builder callback" notation to ensure the types are inferred correctly](../usage/usage-with-typescript.md#type-safety-with-extrareducers)):
+To handle these actions in your reducers, reference the action creators in `createReducer` or `createSlice` using the "builder callback" notation.
 
 ```ts no-transpile {2,6,14,23}
-const reducer1 = createReducer(initialState, {
-  [fetchUserById.fulfilled]: (state, action) => {},
-})
-
-const reducer2 = createReducer(initialState, (builder) => {
+const reducer1 = createReducer(initialState, (builder) => {
   builder.addCase(fetchUserById.fulfilled, (state, action) => {})
 })
 
-const reducer3 = createSlice({
-  name: 'users',
-  initialState,
-  reducers: {},
-  extraReducers: {
-    [fetchUserById.fulfilled]: (state, action) => {},
-  },
-})
-
-const reducer4 = createSlice({
+const reducer2 = createSlice({
   name: 'users',
   initialState,
   reducers: {},
@@ -546,19 +533,20 @@ test('this thunk should always be skipped', async () => {
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
 import { userAPI, User } from './userAPI'
 
-const fetchUserById = createAsyncThunk<User, string, {
-    state: { users: { loading: string, currentRequestId: string } }
-}> (  
-  'users/fetchByIdStatus',
-  async (userId: string, { getState, requestId }) => {
-    const { currentRequestId, loading } = getState().users
-    if (loading !== 'pending' || requestId !== currentRequestId) {
-      return
-    }
-    const response = await userAPI.fetchById(userId)
-    return response.data
+const fetchUserById = createAsyncThunk<
+  User,
+  string,
+  {
+    state: { users: { loading: string; currentRequestId: string } }
   }
-)
+>('users/fetchByIdStatus', async (userId: string, { getState, requestId }) => {
+  const { currentRequestId, loading } = getState().users
+  if (loading !== 'pending' || requestId !== currentRequestId) {
+    return
+  }
+  const response = await userAPI.fetchById(userId)
+  return response.data
+})
 
 const usersSlice = createSlice({
   name: 'users',

docs/api/createReducer.mdx

@@ -37,9 +37,7 @@ function counterReducer(state = initialState, action) {
 This approach works well, but is a bit boilerplate-y and error-prone. For instance, it is easy to forget the `default` case or
 setting the initial state.
 
-The `createReducer` helper streamlines the implementation of such reducers. It supports two different forms of defining case
-reducers to handle actions: a "builder callback" notation and a "map object" notation. Both are equivalent, but the "builder callback"
-notation is preferred.
+The `createReducer` helper streamlines the implementation of such reducers. It uses a "builder callback" notation to define handlers for specific action types, matching against a range of actions, or handling a default case. This is conceptually similar to a switch statement, but with better TS support.
 
 With `createReducer`, your reducers instead look like:
 
@@ -74,8 +72,6 @@ const counterReducer = createReducer(initialState, (builder) => {
 
 [overloadSummary](docblock://createReducer.ts?token=createReducer&overload=0)
 
-The recommended way of using `createReducer` is the builder callback notation, as it works best with TypeScript and most IDEs.
-
 ### Parameters
 
 [params](docblock://createReducer.ts?token=createReducer&overload=0)
@@ -110,17 +106,6 @@ The recommended way of using `createReducer` is the builder callback notation, a
 
 [params,examples](docblock://mapBuilders.ts?token=ActionReducerMapBuilder.addDefaultCase)
 
-## Usage with the "Map Object" Notation
-
-[overloadSummary](docblock://createReducer.ts?token=createReducer&overload=1)
-
-While this notation is a bit shorter, it works only in JavaScript, not TypeScript and has less integration with IDEs,
-so we recommend the "builder callback" notation in most cases.
-
-### Parameters
-
-[params](docblock://createReducer.ts?token=createReducer&overload=1)
-
 ### Returns
 
 The generated reducer function.

docs/api/createSlice.mdx

@@ -59,12 +59,8 @@ function createSlice({
     initialState: any,
     // An object of "case reducers". Key names will be used to generate actions.
     reducers: Object<string, ReducerFunction | ReducerAndPrepareObject>
-    // A "builder callback" function used to add more reducers, or
-    // an additional object of "case reducers", where the keys should be other
-    // action types
-    extraReducers?:
-    | Object<string, ReducerFunction>
-    | ((builder: ActionReducerMapBuilder<State>) => void)
+    // A "builder callback" function used to add more reducers
+    extraReducers?: ((builder: ActionReducerMapBuilder<State>) => void)
 })
 ```
 
@@ -149,48 +145,12 @@ the function from `reducers` will be used to handle that action type.
 
 ### The `extraReducers` "builder callback" notation
 
-The recommended way of using `extraReducers` is to use a callback that receives a `ActionReducerMapBuilder` instance.
-
-This builder notation is also the only way to add matcher reducers and default case reducers to your slice.
+Similar to `createReducer`, the `extraReducers` field uses a "builder callback" notation to define handlers for specific action types, matching against a range of actions, or handling a default case. This is conceptually similar to a switch statement, but with better TS support as it can infer the action type from the provided action creator. It's particularly useful for working with actions produced by `createAction` and `createAsyncThunk`.
 
 [examples](docblock://createSlice.ts?token=CreateSliceOptions.extraReducers)
 
-We recommend using this API as it has better TypeScript support (and thus, IDE autocomplete even for JavaScript users), as it will correctly infer the action type in the reducer based on the provided action creator.
-It's particularly useful for working with actions produced by `createAction` and `createAsyncThunk`.
-
 See [the "Builder Callback Notation" section of the `createReducer` reference](./createReducer.mdx#usage-with-the-builder-callback-notation) for details on how to use `builder.addCase`, `builder.addMatcher`, and `builder.addDefault`
 
-### The `extraReducers` "map object" notation
-
-Like `reducers`, `extraReducers` can be an object containing Redux case reducer functions. However, the keys should
-be other Redux string action type constants, and `createSlice` will _not_ auto-generate action types or action creators
-for reducers included in this parameter.
-
-Action creators that were generated using [`createAction`](./createAction.mdx) may be used directly as the keys here, using
-computed property syntax.
-
-```js
-const incrementBy = createAction('incrementBy')
-
-createSlice({
-  name: 'counter',
-  initialState: 0,
-  reducers: {},
-  extraReducers: {
-    [incrementBy]: (state, action) => {
-      return state + action.payload
-    },
-    'some/other/action': (state, action) => {},
-  },
-})
-```
-
-:::tip
-
-We recommend using the `builder callback` API as the default, especially if you are using TypeScript. If you do not use the `builder callback` and are using TypeScript, you will need to use `actionCreator.type` or `actionCreator.toString()` to force the TS compiler to accept the computed property. Please see [Usage With TypeScript](./../usage/usage-with-typescript.md#type-safety-with-extraReducers) for further details.
-
-:::
-
 ## Return Value
 
 `createSlice` will return an object that looks like:
@@ -268,14 +228,16 @@ const user = createSlice({
     },
   },
   // "map object API"
-  extraReducers: {
-    // @ts-expect-error in TypeScript, this would need to be [counter.actions.increment.type]
-    [counter.actions.increment]: (
-      state,
-      action /* action will be inferred as "any", as the map notation does not contain type information */
-    ) => {
-      state.age += 1
-    },
+  extraReducers: (builder) => {
+    builder.addCase(
+      counter.actions.increment,
+      (
+        state,
+        action /* action will be inferred as "any", as the map notation does not contain type information */
+      ) => {
+        state.age += 1
+      }
+    )
   },
 })