Documentation Updates: RootState, AppDispatch, misc. (#516)

* Add note about inferring RootState, useAppDispatch hook example, minor fixes

* Add note to advanced tutorial about inferring RootState

Author: msutkowski

docs/api/createAsyncThunk.md

@@ -151,7 +151,7 @@ interface RejectedAction<ThunkArg> {
     requestId: string
     arg: ThunkArg
     aborted: boolean
-    condition: bolean
+    condition: boolean
   }
 }
 

docs/api/createEntityAdapter.md

@@ -35,7 +35,7 @@ The methods generated by `createEntityAdapter` will all manipulate an "entity st
 
 Sample usage:
 
-```js
+```ts
 import {
   createEntityAdapter,
   createSlice,
@@ -71,13 +71,15 @@ const store = configureStore({
   }
 })
 
-type State = ReturnType<typeof store.getState>
+type RootState = ReturnType<typeof store.getState>
 
 console.log(store.getState().books)
-// {ids: [], entities: {} }
+// { ids: [], entities: {} }
 
 // Can create a set of memoized selectors based on the location of this entity state
-const booksSelectors = booksAdapter.getSelectors<State>(state => state.books)
+const booksSelectors = booksAdapter.getSelectors<RootState>(
+  state => state.books
+)
 
 // And then use the selectors to retrieve values
 const allBooks = booksSelectors.selectAll(store.getState())

docs/tutorials/advanced-tutorial.md

@@ -85,6 +85,8 @@ export type RootState = ReturnType<typeof rootReducer>
 export default rootReducer
 ```
 
+> **Note:** For other ways to infer the `RootState`, view the [Usage with TypeScript](../usage/usage-with-typescript#getting-the-state-type) guide
+
 #### Store Setup and HMR
 
 Next, we'll create the store instance, including hot-reloading the root reducer. By using the [`module.hot` API for reloading](https://webpack.js.org/concepts/hot-module-replacement/), we can re-import the new version of the root reducer function whenever it's been recompiled, and tell the store to use the new version instead.

docs/usage/usage-with-typescript.md

@@ -28,18 +28,34 @@ const rootReducer = combineReducers({})
 export type RootState = ReturnType<typeof rootReducer>
 ```
 
+Alternatively, if you choose to not create a `rootReducer` yourself and instead pass the slice reducers directly to `configureStore()`, you need to slightly modify the typing to correctly infer the root reducer:
+
+```ts
+import { configureStore } from '@reduxjs/toolkit'
+// ...
+const store = configureStore({
+  reducer: {
+    one: oneSlice.reducer,
+    two: twoSlice.reducer
+  }
+})
+export type RootState = ReturnType<typeof store.getState>
+```
+
 ### Getting the `Dispatch` type
 
-If you want to get the `Dispatch` type from your store, you can extract it after creating the store.  
-It is recommend to give the type a different name like `AppDispatch` to prevent confusion, as the type name `Dispatch` is usually overused.
+If you want to get the `Dispatch` type from your store, you can extract it after creating the store. It is recommended to give the type a different name like `AppDispatch` to prevent confusion, as the type name `Dispatch` is usually overused. You may also find it to be more convenient to export a hook like `useAppDispatch` shown below, then using it wherever you'd call `useDispatch`.
 
 ```typescript {6}
 import { configureStore } from '@reduxjs/toolkit'
 import rootReducer from './rootReducer'
+
 const store = configureStore({
   reducer: rootReducer
 })
+
 export type AppDispatch = typeof store.dispatch
+export const useAppDispatch = () => useDispatch<AppDispatch>() // Export a hook that can be resused to resolve types
 ```
 
 ### Correct typings for the `Dispatch` type