Skip to content

Commit 0dc7fdd

Browse files
authored
Merge pull request #3867 from reduxjs/build-create-slice
2 parents 94fca95 + a385388 commit 0dc7fdd

File tree

7 files changed

+401
-195
lines changed

7 files changed

+401
-195
lines changed

docs/api/createSlice.mdx

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@ const todosSlice = createSlice({
138138

139139
Alternatively, the `reducers` field can be a callback which receives a "create" object.
140140

141-
The main benefit of this is that you can create [async thunks](./createAsyncThunk) as part of your slice. Types are also slightly simplified for prepared reducers.
141+
The main benefit of this is that you can create [async thunks](./createAsyncThunk) as part of your slice (though for bundle size reasons, you [need a bit of setup for this](#createasyncthunk)). Types are also slightly simplified for prepared reducers.
142142

143143
```ts title="Creator callback for reducers"
144144
import { createSlice, nanoid } from '@reduxjs/toolkit'
@@ -240,6 +240,27 @@ create.preparedReducer(
240240

241241
Creates an async thunk instead of an action creator.
242242

243+
:::warning Setup
244+
245+
To avoid pulling `createAsyncThunk` into the bundle size of `createSlice` by default, some extra setup is required to use `create.asyncThunk`.
246+
247+
The version of `createSlice` exported from RTK will throw an error if `create.asyncThunk` is called.
248+
249+
Instead, import `buildCreateSlice` and `asyncThunkCreator`, and create your own version of `createSlice`:
250+
251+
```ts
252+
import { buildCreateSlice, asyncThunkCreator } from '@reduxjs/toolkit'
253+
254+
// name is up to you
255+
export const createSliceWithThunks = buildCreateSlice({
256+
creators: { asyncThunk: asyncThunkCreator },
257+
})
258+
```
259+
260+
Then import this `createSlice` as needed instead of the exported version from RTK.
261+
262+
:::
263+
243264
**Parameters**
244265

245266
- **payloadCreator** The thunk [payload creator](./createAsyncThunk#payloadcreator).

errors.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,5 +33,8 @@
3333
"31": "\"middleware\" field must be a callback",
3434
"32": "When using custom hooks for context, all hooks need to be provided: .\\nHook was either not provided or not a function.",
3535
"33": "Existing Redux context detected. If you already have a store set up, please use the traditional Redux setup.",
36-
"34": "selectSlice returned undefined for an uninjected slice reducer"
36+
"34": "selectSlice returned undefined for an uninjected slice reducer",
37+
"35": "Cannot use `create.asyncThunk` in the built-in `createSlice`. Use `buildCreateSlice({ creators: { asyncThunk: asyncThunkCreator } })` to create a customised version of `createSlice`.",
38+
"36": "`context.addCase` cannot be called with an empty action type",
39+
"37": "`context.addCase` cannot be called with two reducers for the same action type: type"
3740
}

packages/toolkit/src/createAsyncThunk.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -487,7 +487,7 @@ type CreateAsyncThunk<CurriedThunkApiConfig extends AsyncThunkConfig> = {
487487
>
488488
}
489489

490-
export const createAsyncThunk = (() => {
490+
export const createAsyncThunk = /* @__PURE__ */ (() => {
491491
function createAsyncThunk<
492492
Returned,
493493
ThunkArg,

0 commit comments

Comments
 (0)