Merge pull request #1110 from reduxjs/docs/rtk-video

Author: markerikson

docs/api/configureStore.mdx

@@ -5,6 +5,8 @@ sidebar_label: configureStore
 hide_title: true
 ---
 
+ 
+
 # `configureStore`
 
 A friendly abstraction over the standard Redux `createStore` function that adds good defaults

docs/api/createAction.mdx

@@ -5,6 +5,8 @@ sidebar_label: createAction
 hide_title: true
 ---
 
+ 
+
 # `createAction`
 
 A helper function for defining a Redux [action](https://redux.js.org/basics/actions) type and creator.
@@ -21,7 +23,7 @@ const INCREMENT = 'counter/increment'
 function increment(amount: number) {
   return {
     type: INCREMENT,
-    payload: amount
+    payload: amount,
   }
 }
 
@@ -63,8 +65,8 @@ const addTodo = createAction('todos/add', function prepare(text: string) {
     payload: {
       text,
       id: nanoid(),
-      createdAt: new Date().toISOString()
-    }
+      createdAt: new Date().toISOString(),
+    },
   }
 })
 
@@ -95,7 +97,7 @@ import { createAction, createReducer } from '@reduxjs/toolkit'
 const increment = createAction<number>('counter/increment')
 const decrement = createAction<number>('counter/decrement')
 
-const counterReducer = createReducer(0, builder => {
+const counterReducer = createReducer(0, (builder) => {
   builder.addCase(increment, (state, action) => state + action.payload)
   builder.addCase(decrement, (state, action) => state - action.payload)
 })
@@ -133,7 +135,7 @@ const counterReducer = createReducer(0, {
   [increment]: (state, action) => state + action.payload,
 
   // You would need to use the action type explicitly instead.
-  [INCREMENT]: (state, action) => state + action.payload
+  [INCREMENT]: (state, action) => state + action.payload,
 })
 ```
 
@@ -178,7 +180,7 @@ const increment = createAction<number>('INCREMENT')
 export const epic = (actions$: Observable<Action>) =>
   actions$.pipe(
     filter(increment.match),
-    map(action => {
+    map((action) => {
       // action.payload can be safely used as number here (and will also be correctly inferred by TypeScript)
       // ...
     })

docs/api/createAsyncThunk.mdx

@@ -5,6 +5,8 @@ sidebar_label: createAsyncThunk
 hide_title: true
 ---
 
+ 
+
 # `createAsyncThunk`
 
 ## Overview
@@ -42,8 +44,8 @@ const usersSlice = createSlice({
     [fetchUserById.fulfilled]: (state, action) => {
       // Add user to the state array
       state.entities.push(action.payload)
-    }
-  }
+    },
+  },
 })
 
 // Later, dispatch the thunk as needed in the app
@@ -193,10 +195,10 @@ To handle these actions in your reducers, reference the action creators in `crea
 
 ```js {2,6,14,23}
 const reducer1 = createReducer(initialState, {
-  [fetchUserById.fulfilled]: (state, action) => {}
+  [fetchUserById.fulfilled]: (state, action) => {},
 })
 
-const reducer2 = createReducer(initialState, builder => {
+const reducer2 = createReducer(initialState, (builder) => {
   builder.addCase(fetchUserById.fulfilled, (state, action) => {})
 })
 
@@ -205,17 +207,17 @@ const reducer3 = createSlice({
   initialState,
   reducers: {},
   extraReducers: {
-    [fetchUserById.fulfilled]: (state, action) => {}
-  }
+    [fetchUserById.fulfilled]: (state, action) => {},
+  },
 })
 
 const reducer4 = createSlice({
   name: 'users',
   initialState,
   reducers: {},
-  extraReducers: builder => {
+  extraReducers: (builder) => {
     builder.addCase(fetchUserById.fulfilled, (state, action) => {})
-  }
+  },
 })
 ```
 
@@ -244,8 +246,8 @@ import { unwrapResult } from '@reduxjs/toolkit'
 const onClick = () => {
   dispatch(fetchUserById(userId))
     .then(unwrapResult)
-    .then(originalPromiseResult => {})
-    .catch(rejectedValueOrSerializedError => {})
+    .then((originalPromiseResult) => {})
+    .catch((rejectedValueOrSerializedError) => {})
 }
 ```
 
@@ -310,7 +312,7 @@ const fetchUserById = createAsyncThunk(
         // Already fetched or in progress, don't need to re-fetch
         return false
       }
-    }
+    },
   }
 )
 ```
@@ -372,7 +374,7 @@ const fetchUserById = createAsyncThunk(
   'users/fetchById',
   async (userId: string, thunkAPI) => {
     const response = await fetch(`https://reqres.in/api/users/${userId}`, {
-      signal: thunkAPI.signal
+      signal: thunkAPI.signal,
     })
     return await response.json()
   }
@@ -426,7 +428,7 @@ const fetchUserById = createAsyncThunk(
       source.cancel()
     })
     const response = await axios.get(`https://reqres.in/api/users/${userId}`, {
-      cancelToken: source.token
+      cancelToken: source.token,
     })
     return response.data
   }
@@ -459,7 +461,7 @@ const usersSlice = createSlice({
     entities: [],
     loading: 'idle',
     currentRequestId: undefined,
-    error: null
+    error: null,
   },
   reducers: {},
   extraReducers: {
@@ -484,15 +486,15 @@ const usersSlice = createSlice({
         state.error = action.error
         state.currentRequestId = undefined
       }
-    }
-  }
+    },
+  },
 })
 
 const UsersComponent = () => {
-  const { users, loading, error } = useSelector(state => state.users)
+  const { users, loading, error } = useSelector((state) => state.users)
   const dispatch = useDispatch()
 
-  const fetchOneUser = async userId => {
+  const fetchOneUser = async (userId) => {
     try {
       const resultAction = await dispatch(fetchUserById(userId))
       const user = unwrapResult(resultAction)
@@ -577,14 +579,14 @@ interface UsersState {
 
 const initialState = {
   entities: {},
-  error: null
+  error: null,
 } as UsersState
 
 const usersSlice = createSlice({
   name: 'users',
   initialState,
   reducers: {},
-  extraReducers: builder => {
+  extraReducers: (builder) => {
     // The `builder` callback form is used here because it provides correctly typed reducers from the action creators
     builder.addCase(updateUser.fulfilled, (state, { payload }) => {
       state.entities[payload.id] = payload
@@ -597,7 +599,7 @@ const usersSlice = createSlice({
         state.error = action.error.message
       }
     })
-  }
+  },
 })
 
 export default usersSlice.reducer

docs/api/createEntityAdapter.mdx

@@ -5,6 +5,8 @@ sidebar_label: createEntityAdapter
 hide_title: true
 ---
 
+ 
+
 # `createEntityAdapter`
 
 ## Overview
@@ -39,16 +41,16 @@ Sample usage:
 import {
   createEntityAdapter,
   createSlice,
-  configureStore
+  configureStore,
 } from '@reduxjs/toolkit'
 
 type Book = { bookId: string; title: string }
 
 const booksAdapter = createEntityAdapter<Book>({
   // Assume IDs are stored in a field other than `book.id`
-  selectId: book => book.bookId,
+  selectId: (book) => book.bookId,
   // Keep the "all IDs" array sorted based on book titles
-  sortComparer: (a, b) => a.title.localeCompare(b.title)
+  sortComparer: (a, b) => a.title.localeCompare(b.title),
 })
 
 const booksSlice = createSlice({
@@ -61,14 +63,14 @@ const booksSlice = createSlice({
     booksReceived(state, action) {
       // Or, call them as "mutating" helpers in a case reducer
       booksAdapter.setAll(state, action.payload.books)
-    }
-  }
+    },
+  },
 })
 
 const store = configureStore({
   reducer: {
-    books: booksSlice.reducer
-  }
+    books: booksSlice.reducer,
+  },
 })
 
 type RootState = ReturnType<typeof store.getState>
@@ -78,7 +80,7 @@ console.log(store.getState().books)
 
 // Can create a set of memoized selectors based on the location of this entity state
 const booksSelectors = booksAdapter.getSelectors<RootState>(
-  state => state.books
+  (state) => state.books
 )
 
 // And then use the selectors to retrieve values
@@ -243,14 +245,14 @@ It accepts an optional object as an argument. The fields in that object will be
 const booksSlice = createSlice({
   name: 'books',
   initialState: booksAdapter.getInitialState({
-    loading: 'idle'
+    loading: 'idle',
   }),
   reducers: {
     booksLoadingStarted(state, action) {
       // Can update the additional state field
       state.loading = 'pending'
-    }
-  }
+    },
+  },
 })
 ```
 
@@ -276,12 +278,12 @@ For example, the entity state for a `Book` type might be kept in the Redux state
 ```js
 const store = configureStore({
   reducer: {
-    books: booksReducer
-  }
+    books: booksReducer,
+  },
 })
 
 const simpleSelectors = booksAdapter.getSelectors()
-const globalizedSelectors = booksAdapter.getSelectors(state => state.books)
+const globalizedSelectors = booksAdapter.getSelectors((state) => state.books)
 
 // Need to manually pass the correct entity state object in to this selector
 const bookIds = simpleSelectors.selectIds(store.getState().books)
@@ -306,19 +308,19 @@ Exercising several of the CRUD methods and selectors:
 import {
   createEntityAdapter,
   createSlice,
-  configureStore
+  configureStore,
 } from '@reduxjs/toolkit'
 
 // Since we don't provide `selectId`, it defaults to assuming `entity.id` is the right field
 const booksAdapter = createEntityAdapter({
   // Keep the "all IDs" array sorted based on book titles
-  sortComparer: (a, b) => a.title.localeCompare(b.title)
+  sortComparer: (a, b) => a.title.localeCompare(b.title),
 })
 
 const booksSlice = createSlice({
   name: 'books',
   initialState: booksAdapter.getInitialState({
-    loading: 'idle'
+    loading: 'idle',
   }),
   reducers: {
     // Can pass adapter functions directly as case reducers.  Because we're passing this
@@ -336,28 +338,28 @@ const booksSlice = createSlice({
         state.loading = 'idle'
       }
     },
-    bookUpdated: booksAdapter.updateOne
-  }
+    bookUpdated: booksAdapter.updateOne,
+  },
 })
 
 const {
   bookAdded,
   booksLoading,
   booksReceived,
-  bookUpdated
+  bookUpdated,
 } = booksSlice.actions
 
 const store = configureStore({
   reducer: {
-    books: booksSlice.reducer
-  }
+    books: booksSlice.reducer,
+  },
 })
 
 // Check the initial state:
 console.log(store.getState().books)
 // {ids: [], entities: {}, loading: 'idle' }
 
-const booksSelectors = booksAdapter.getSelectors(state => state.books)
+const booksSelectors = booksAdapter.getSelectors((state) => state.books)
 
 store.dispatch(bookAdded({ id: 'a', title: 'First' }))
 console.log(store.getState().books)
@@ -371,7 +373,7 @@ console.log(store.getState().books)
 store.dispatch(
   booksReceived([
     { id: 'b', title: 'Book 3' },
-    { id: 'c', title: 'Book 2' }
+    { id: 'c', title: 'Book 2' },
   ])
 )