Skip to content

Commit 0a1c40e

Browse files
authored
Minor docs tweaks (#992)
- Show `store` as exported in relevant snippets - Fix incorrect highlighted section in docs regarding middleware usage with typescript - Convert majority of snippet highlighting methods to explicitly wrap lines as opposed to specifying line numbers
1 parent 3c293bb commit 0a1c40e

File tree

2 files changed

+22
-5
lines changed

2 files changed

+22
-5
lines changed

docs/usage/usage-guide.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,8 @@ export default store
9393
You can also pass an object full of ["slice reducers"](https://redux.js.org/recipes/structuring-reducers/splitting-reducer-logic), and `configureStore` will call [`combineReducers`](https://redux.js.org/api/combinereducers) for you:
9494

9595
```js
96+
import { configureStore } from '@reduxjs/toolkit'
97+
// highlight-start
9698
import usersReducer from './usersReducer'
9799
import postsReducer from './postsReducer'
98100

@@ -102,6 +104,9 @@ const store = configureStore({
102104
posts: postsReducer,
103105
},
104106
})
107+
// highlight-end
108+
109+
export default store
105110
```
106111

107112
Note that this only works for one level of reducers. If you want to nest reducers, you'll need to call `combineReducers` yourself to handle the nesting.

docs/usage/usage-with-typescript.md

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,12 @@ The basics of using `configureStore` are shown in [TypeScript Quick Start tutori
3636
The easiest way of getting the `State` type is to define the root reducer in advance and extract its `ReturnType`.
3737
It is recommend to give the type a different name like `RootState` to prevent confusion, as the type name `State` is usually overused.
3838

39-
```typescript {3}
39+
```typescript
4040
import { combineReducers } from '@reduxjs/toolkit'
4141
const rootReducer = combineReducers({})
42+
// highlight-start
4243
export type RootState = ReturnType<typeof rootReducer>
44+
// highlight-end
4345
```
4446
4547
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:
@@ -54,13 +56,15 @@ const store = configureStore({
5456
},
5557
})
5658
export type RootState = ReturnType<typeof store.getState>
59+
60+
export default store
5761
```
5862

5963
### Getting the `Dispatch` type
6064

6165
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`.
6266

63-
```typescript {6}
67+
```typescript
6468
import { configureStore } from '@reduxjs/toolkit'
6569
import { useDispatch } from 'react-redux'
6670
import rootReducer from './rootReducer'
@@ -69,8 +73,12 @@ const store = configureStore({
6973
reducer: rootReducer,
7074
})
7175

76+
// highlight-start
7277
export type AppDispatch = typeof store.dispatch
7378
export const useAppDispatch = () => useDispatch<AppDispatch>() // Export a hook that can be reused to resolve types
79+
// highlight-end
80+
81+
export default store
7482
```
7583

7684
### Correct typings for the `Dispatch` type
@@ -81,17 +89,18 @@ As TypeScript often widens array types when combining arrays using the spread op
8189

8290
Also, we suggest using the callback notation for the `middleware` option to get a correctly pre-typed version of `getDefaultMiddleware` that does not require you to specify any generics by hand.
8391

84-
```ts {10-20}
92+
```ts
8593
import { configureStore } from '@reduxjs/toolkit'
8694
import additionalMiddleware from 'additional-middleware'
8795
import logger from 'redux-logger'
8896
// @ts-ignore
8997
import untypedMiddleware from 'untyped-middleware'
9098
import rootReducer from './rootReducer'
9199

92-
type RootState = ReturnType<typeof rootReducer>
100+
export type RootState = ReturnType<typeof rootReducer>
93101
const store = configureStore({
94102
reducer: rootReducer,
103+
// highlight-start
95104
middleware: (getDefaultMiddleware) =>
96105
getDefaultMiddleware()
97106
.prepend(
@@ -105,9 +114,12 @@ const store = configureStore({
105114
)
106115
// prepend and concat calls can be chained
107116
.concat(logger),
117+
// highlight-end
108118
})
109119

110-
type AppDispatch = typeof store.dispatch
120+
export type AppDispatch = typeof store.dispatch
121+
122+
export default store
111123
```
112124

113125
#### Using `MiddlewareArray` without `getDefaultMiddleware`

0 commit comments

Comments
 (0)