You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
- 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
Copy file name to clipboardExpand all lines: docs/usage/usage-guide.md
+5Lines changed: 5 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -93,6 +93,8 @@ export default store
93
93
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:
94
94
95
95
```js
96
+
import { configureStore } from'@reduxjs/toolkit'
97
+
// highlight-start
96
98
importusersReducerfrom'./usersReducer'
97
99
importpostsReducerfrom'./postsReducer'
98
100
@@ -102,6 +104,9 @@ const store = configureStore({
102
104
posts: postsReducer,
103
105
},
104
106
})
107
+
// highlight-end
108
+
109
+
exportdefaultstore
105
110
```
106
111
107
112
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.
Copy file name to clipboardExpand all lines: docs/usage/usage-with-typescript.md
+17-5Lines changed: 17 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -36,10 +36,12 @@ The basics of using `configureStore` are shown in [TypeScript Quick Start tutori
36
36
The easiest way of getting the `State` type is to define the root reducer in advance and extract its `ReturnType`.
37
37
It is recommend to give the type a different name like `RootState` to prevent confusion, as the type name `State` is usually overused.
38
38
39
-
```typescript {3}
39
+
```typescript
40
40
import { combineReducers } from'@reduxjs/toolkit'
41
41
const rootReducer =combineReducers({})
42
+
// highlight-start
42
43
exporttypeRootState=ReturnType<typeofrootReducer>
44
+
// highlight-end
43
45
```
44
46
45
47
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({
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`.
62
66
63
-
```typescript {6}
67
+
```typescript
64
68
import { configureStore } from'@reduxjs/toolkit'
65
69
import { useDispatch } from'react-redux'
66
70
importrootReducerfrom'./rootReducer'
@@ -69,8 +73,12 @@ const store = configureStore({
69
73
reducer: rootReducer,
70
74
})
71
75
76
+
// highlight-start
72
77
exporttypeAppDispatch=typeofstore.dispatch
73
78
exportconst useAppDispatch = () =>useDispatch<AppDispatch>() // Export a hook that can be reused to resolve types
79
+
// highlight-end
80
+
81
+
exportdefaultstore
74
82
```
75
83
76
84
### Correct typings for the `Dispatch` type
@@ -81,17 +89,18 @@ As TypeScript often widens array types when combining arrays using the spread op
81
89
82
90
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.
0 commit comments