Skip to content

Commit 83ef9d5

Browse files
raulsanchez1024raulsanchez1024
authored
Updates docs to use type-only imports (#2417)
1 parent a05ed0c commit 83ef9d5

23 files changed

+115
-85
lines changed

‎docs/api/configureStore.mdx

+3-3
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@ of `[offline, applyMiddleware, devToolsExtension]`.
138138

139139
```ts
140140
// file: reducers.ts noEmit
141-
import { Reducer } from '@reduxjs/toolkit'
141+
import type { Reducer } from '@reduxjs/toolkit'
142142
declare const rootReducer: Reducer<{}>
143143
export default rootReducer
144144
@@ -155,12 +155,12 @@ const store = configureStore({ reducer: rootReducer })
155155

156156
```ts no-transpile
157157
// file: todos/todosReducer.ts noEmit
158-
import { Reducer } from '@reduxjs/toolkit'
158+
import type { Reducer } from '@reduxjs/toolkit'
159159
declare const reducer: Reducer<{}>
160160
export default reducer
161161
162162
// file: visibility/visibilityReducer.ts noEmit
163-
import { Reducer } from '@reduxjs/toolkit'
163+
import type { Reducer } from '@reduxjs/toolkit'
164164
declare const reducer: Reducer<{}>
165165
export default reducer
166166

‎docs/api/createAction.mdx

+5-3
Original file line numberDiff line numberDiff line change
@@ -154,7 +154,8 @@ This `match` method is a [TypeScript type guard](https://www.typescriptlang.org/
154154
This behavior can be particularly useful when used in custom middlewares, where manual casts might be neccessary otherwise.
155155
156156
```ts
157-
import { createAction, Action } from '@reduxjs/toolkit'
157+
import { createAction } from '@reduxjs/toolkit'
158+
import type { Action } from '@reduxjs/toolkit'
158159

159160
const increment = createAction<number>('INCREMENT')
160161

@@ -171,8 +172,9 @@ function someFunction(action: Action) {
171172
The `match` method can also be used as a filter method, which makes it powerful when used with redux-observable:
172173
173174
```ts
174-
import { createAction, Action } from '@reduxjs/toolkit'
175-
import { Observable } from 'rxjs'
175+
import { createAction } from '@reduxjs/toolkit'
176+
import type { Action } from '@reduxjs/toolkit'
177+
import type { Observable } from 'rxjs'
176178
import { map, filter } from 'rxjs/operators'
177179

178180
const increment = createAction<number>('INCREMENT')

‎docs/api/createAsyncThunk.mdx

+10-6
Original file line numberDiff line numberDiff line change
@@ -399,7 +399,8 @@ A real-life example of that would look like this:
399399

400400
```ts no-transpile
401401
// file: store.ts noEmit
402-
import { configureStore, Reducer } from '@reduxjs/toolkit'
402+
import { configureStore } from '@reduxjs/toolkit'
403+
import type { Reducer } from '@reduxjs/toolkit'
403404
import { useDispatch } from 'react-redux'
404405

405406
declare const reducer: Reducer<{}>
@@ -624,7 +625,8 @@ const UsersComponent = () => {
624625

625626
```ts no-transpile
626627
// file: store.ts noEmit
627-
import { configureStore, Reducer } from '@reduxjs/toolkit'
628+
import { configureStore } from '@reduxjs/toolkit'
629+
import type { Reducer } from '@reduxjs/toolkit'
628630
import { useDispatch } from 'react-redux'
629631
import usersReducer from './user/slice'
630632

@@ -641,7 +643,7 @@ export declare const userAPI: {
641643
// file: user/slice.ts
642644
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
643645
import { userAPI } from './userAPI'
644-
import { AxiosError } from 'axios'
646+
import type { AxiosError } from 'axios'
645647

646648
// Sample types that will be used
647649
export interface User {
@@ -723,10 +725,12 @@ declare module 'some-toast-library' {
723725
// file: user/UsersComponent.ts
724726

725727
import React from 'react'
726-
import { useAppDispatch, RootState } from '../store'
728+
import { useAppDispatch } from '../store'
729+
import type { RootState } from '../store'
727730
import { useSelector } from 'react-redux'
728-
import { User, updateUser } from './slice'
729-
import { FormikHelpers } from 'formik'
731+
import { updateUser } from './slice'
732+
import type { User } from './slice'
733+
import type { FormikHelpers } from 'formik'
730734
import { showToast } from 'some-toast-library'
731735

732736
interface FormValues extends Omit<User, 'id'> {}

‎docs/api/createSlice.mdx

+6-3
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@ Internally, it uses [`createAction`](./createAction.mdx) and [`createReducer`](.
1818
you may also use [Immer](https://immerjs.github.io/immer/) to write "mutating" immutable updates:
1919

2020
```ts
21-
import { createSlice, PayloadAction } from '@reduxjs/toolkit'
21+
import { createSlice } from '@reduxjs/toolkit'
22+
import type { PayloadAction } from '@reduxjs/toolkit'
2223

2324
interface CounterState {
2425
value: number
@@ -108,7 +109,8 @@ const counterSlice = createSlice({
108109
If you need to customize the creation of the payload value of an action creator by means of a [`prepare callback`](./createAction.mdx#using-prepare-callbacks-to-customize-action-contents), the value of the appropriate field of the `reducers` argument object should be an object instead of a function. This object must contain two properties: `reducer` and `prepare`. The value of the `reducer` field should be the case reducer function while the value of the `prepare` field should be the prepare callback function:
109110

110111
```ts
111-
import { createSlice, PayloadAction, nanoid } from '@reduxjs/toolkit'
112+
import { createSlice, nanoid } from '@reduxjs/toolkit'
113+
import type { PayloadAction } from '@reduxjs/toolkit'
112114
113115
interface Item {
114116
id: string
@@ -224,7 +226,8 @@ for references in a larger codebase.
224226
## Examples
225227

226228
```ts
227-
import { createSlice, createAction, PayloadAction } from '@reduxjs/toolkit'
229+
import { createSlice, createAction } from '@reduxjs/toolkit'
230+
import type { PayloadAction } from '@reduxjs/toolkit'
228231
import { createStore, combineReducers } from 'redux'
229232
230233
const incrementBy = createAction<number>('incrementBy')

‎docs/api/matching-utilities.mdx

+18-10
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,8 @@ Accepts the same inputs as `isAllOf` and will return a type guard function that
4848
A higher-order function that returns a type guard function that may be used to check whether an action was created by [`createAsyncThunk`](./createAsyncThunk).
4949

5050
```ts title="isAsyncThunkAction usage"
51-
import { isAsyncThunkAction, AnyAction } from '@reduxjs/toolkit'
51+
import { isAsyncThunkAction } from '@reduxjs/toolkit'
52+
import type { AnyAction } from '@reduxjs/toolkit'
5253
import { requestThunk1, requestThunk2 } from '@virtual/matchers'
5354

5455
const isARequestAction = isAsyncThunkAction(requestThunk1, requestThunk2)
@@ -65,7 +66,8 @@ function handleRequestAction(action: AnyAction) {
6566
A higher-order function that returns a type guard function that may be used to check whether an action is a 'pending' action creator from the `createAsyncThunk` promise lifecycle.
6667

6768
```ts title="isPending usage"
68-
import { isPending, AnyAction } from '@reduxjs/toolkit'
69+
import { isPending } from '@reduxjs/toolkit'
70+
import type { AnyAction } from '@reduxjs/toolkit'
6971
import { requestThunk1, requestThunk2 } from '@virtual/matchers'
7072

7173
const isAPendingAction = isPending(requestThunk1, requestThunk2)
@@ -82,7 +84,8 @@ function handlePendingAction(action: AnyAction) {
8284
A higher-order function that returns a type guard function that may be used to check whether an action is a 'fulfilled'' action creator from the `createAsyncThunk` promise lifecycle.
8385

8486
```ts title="isFulfilled usage"
85-
import { isFulfilled, AnyAction } from '@reduxjs/toolkit'
87+
import { isFulfilled } from '@reduxjs/toolkit'
88+
import type { AnyAction } from '@reduxjs/toolkit'
8689
import { requestThunk1, requestThunk2 } from '@virtual/matchers'
8790

8891
const isAFulfilledAction = isFulfilled(requestThunk1, requestThunk2)
@@ -99,7 +102,8 @@ function handleFulfilledAction(action: AnyAction) {
99102
A higher-order function that returns a type guard function that may be used to check whether an action is a 'rejected' action creator from the `createAsyncThunk` promise lifecycle.
100103

101104
```ts title="isRejected usage"
102-
import { isRejected, AnyAction } from '@reduxjs/toolkit'
105+
import { isRejected } from '@reduxjs/toolkit'
106+
import type { AnyAction } from '@reduxjs/toolkit'
103107
import { requestThunk1, requestThunk2 } from '@virtual/matchers'
104108

105109
const isARejectedAction = isRejected(requestThunk1, requestThunk2)
@@ -116,7 +120,8 @@ function handleRejectedAction(action: AnyAction) {
116120
A higher-order function that returns a type guard function that may be used to check whether an action is a 'rejected' action creator from the `createAsyncThunk` promise lifecycle that was created by [`rejectWithValue`](./createAsyncThunk#handling-thunk-errors).
117121

118122
```ts title="isRejectedWithValue usage"
119-
import { isRejectedWithValue, AnyAction } from '@reduxjs/toolkit'
123+
import { isRejectedWithValue } from '@reduxjs/toolkit'
124+
import type { AnyAction } from '@reduxjs/toolkit'
120125
import { requestThunk1, requestThunk2 } from '@virtual/matchers'
121126

122127
const isARejectedWithValueAction = isRejectedWithValue(
@@ -143,8 +148,8 @@ First, let's examine an unnecessarily complex example:
143148
import {
144149
createAsyncThunk,
145150
createReducer,
146-
PayloadAction,
147151
} from '@reduxjs/toolkit'
152+
import type { PayloadAction } from '@reduxjs/toolkit'
148153

149154
interface Data {
150155
isInteresting: boolean
@@ -213,8 +218,8 @@ import {
213218
initialState,
214219
isSpecial,
215220
isInteresting,
216-
Data,
217221
} from '@virtual/matchers' // This is a fake pkg that provides the types shown above
222+
import type { Data } from '@virtual/matchers' // This is a fake pkg that provides the types shown above
218223
219224
const loadingReducer = createReducer(initialState, (builder) => {
220225
builder
@@ -238,8 +243,10 @@ const loadingReducer = createReducer(initialState, (builder) => {
238243
The function returned by `isAllOf` and `isAnyOf` can also be used as a TypeScript type guard in other contexts.
239244

240245
```ts title="Using isAllOf as a type guard"
241-
import { isAllOf, PayloadAction } from '@reduxjs/toolkit'
242-
import { Data, isSpecial, isInteresting } from '@virtual/matchers' // This is a fake pkg that provides the types shown above
246+
import { isAllOf } from '@reduxjs/toolkit'
247+
import type { PayloadAction } from '@reduxjs/toolkit'
248+
import { isSpecial, isInteresting } from '@virtual/matchers' // This is a fake pkg that provides the types shown above
249+
import type { Data } from '@virtual/matchers' // This is a fake pkg that provides the types shown above
243250
244251
const isSpecialAndInteresting = isAllOf(isSpecial, isInteresting)
245252

@@ -252,7 +259,8 @@ function someFunction(action: PayloadAction<Data>) {
252259
```
253260

254261
```ts title="Using isAnyOf as a type guard"
255-
import { isAnyOf, PayloadAction } from '@reduxjs/toolkit'
262+
import { isAnyOf } from '@reduxjs/toolkit'
263+
import type { PayloadAction } from '@reduxjs/toolkit'
256264
import { Data, isSpecial, isInteresting } from '@virtual/matchers' // this is a fake pkg that provides the types shown above
257265
258266
const isSpecialOrInteresting = isAnyOf(isSpecial, isInteresting)

‎docs/rtk-query/overview.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ For typical usage with React, start by importing `createApi` and defining an "AP
103103

104104
```ts
105105
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
106-
import { Pokemon } from './types'
106+
import type { Pokemon } from './types'
107107

108108
// Define a service using a base URL and expected endpoints
109109
export const pokemonApi = createApi({

‎docs/rtk-query/usage-with-typescript.mdx

+3-2
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,8 @@ The `meta` property returned from a `baseQuery` will always be considered as pot
144144
:::
145145
146146
```ts title="Simple baseQuery TypeScript example"
147-
import { createApi, BaseQueryFn } from '@reduxjs/toolkit/query'
147+
import { createApi } from '@reduxjs/toolkit/query'
148+
import type { BaseQueryFn } from '@reduxjs/toolkit/query'
148149

149150
const simpleBaseQuery: BaseQueryFn<
150151
string, // Args
@@ -450,7 +451,7 @@ export interface Post {
450451

451452
// file: api.ts
452453
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
453-
import { Post } from './types'
454+
import type { Post } from './types'
454455

455456
export const api = createApi({
456457
baseQuery: fetchBaseQuery({ baseUrl: '/' }),

‎docs/rtk-query/usage/automated-refetching.mdx

+9-9
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ export interface User {
7070

7171
// file: api.ts
7272
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query'
73-
import { Post, User } from './types'
73+
import type { Post, User } from './types'
7474

7575
const api = createApi({
7676
baseQuery: fetchBaseQuery({
@@ -134,7 +134,7 @@ export interface User {
134134

135135
// file: api.ts
136136
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query'
137-
import { Post, User } from './types'
137+
import type { Post, User } from './types'
138138

139139
const api = createApi({
140140
baseQuery: fetchBaseQuery({
@@ -190,7 +190,7 @@ export interface User {
190190

191191
// file: api.ts
192192
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query'
193-
import { Post, User } from './types'
193+
import type { Post, User } from './types'
194194

195195
const api = createApi({
196196
baseQuery: fetchBaseQuery({
@@ -257,7 +257,7 @@ export interface User {
257257

258258
// file: api.ts
259259
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query'
260-
import { Post, User } from './types'
260+
import type { Post, User } from './types'
261261

262262
const api = createApi({
263263
baseQuery: fetchBaseQuery({
@@ -337,7 +337,7 @@ export interface User {
337337

338338
// file: api.ts
339339
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query'
340-
import { Post, User } from './types'
340+
import type { Post, User } from './types'
341341

342342
const api = createApi({
343343
baseQuery: fetchBaseQuery({
@@ -639,7 +639,7 @@ export interface User {
639639
640640
// file: api.ts
641641
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
642-
import { Post, User } from './types'
642+
import type { Post, User } from './types'
643643
644644
export const api = createApi({
645645
baseQuery: fetchBaseQuery({ baseUrl: '/' }),
@@ -706,7 +706,7 @@ export interface User {
706706

707707
// file: api.ts
708708
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
709-
import { Post, User } from './types'
709+
import type { Post, User } from './types'
710710

711711
export const api = createApi({
712712
baseQuery: fetchBaseQuery({ baseUrl: '/' }),
@@ -853,7 +853,7 @@ export interface User {
853853

854854
// file: api.ts
855855
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query'
856-
import { Post, User } from './types'
856+
import type { Post, User } from './types'
857857

858858
const api = createApi({
859859
baseQuery: fetchBaseQuery({ baseUrl: 'https://example.com' }),
@@ -903,7 +903,7 @@ export interface User {
903903

904904
// file: api.ts
905905
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query'
906-
import { Post, User } from './types'
906+
import type { Post, User } from './types'
907907

908908
// highlight-start
909909
function providesList<R extends { id: string | number }[], T extends string>(

‎docs/rtk-query/usage/cache-behavior.mdx

+6-6
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ export interface Post {
9292

9393
// file: api.ts
9494
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
95-
import { Post } from './types'
95+
import type { Post } from './types'
9696

9797
export const api = createApi({
9898
baseQuery: fetchBaseQuery({ baseUrl: '/' }),
@@ -181,7 +181,7 @@ export interface Post {
181181

182182
// file: api.ts
183183
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
184-
import { Post } from './types'
184+
import type { Post } from './types'
185185

186186
export const api = createApi({
187187
baseQuery: fetchBaseQuery({ baseUrl: '/' }),
@@ -233,7 +233,7 @@ export interface Post {
233233

234234
// file: src/services/api.ts
235235
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
236-
import { Post } from './types'
236+
import type { Post } from './types'
237237

238238
export const api = createApi({
239239
baseQuery: fetchBaseQuery({ baseUrl: '/' }),
@@ -258,7 +258,7 @@ export interface Post {
258258

259259
// file: src/services/api.ts noEmit
260260
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
261-
import { Post } from './types'
261+
import type { Post } from './types'
262262

263263
export const api = createApi({
264264
baseQuery: fetchBaseQuery({ baseUrl: '/' }),
@@ -312,7 +312,7 @@ export interface Post {
312312

313313
// file: src/services/api.ts
314314
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
315-
import { Post } from './types'
315+
import type { Post } from './types'
316316

317317
export const api = createApi({
318318
baseQuery: fetchBaseQuery({ baseUrl: '/' }),
@@ -337,7 +337,7 @@ export interface Post {
337337

338338
// file: src/services/api.ts noEmit
339339
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
340-
import { Post } from './types'
340+
import type { Post } from './types'
341341

342342
export const api = createApi({
343343
baseQuery: fetchBaseQuery({ baseUrl: '/' }),

0 commit comments

Comments
 (0)