Redux Slice Generator
Generate Redux Toolkit slices with reducers and async thunks
About this ToolHow it works, benefits & use casesTap to collapse
Redux Toolkit removed a lot of boilerplate, but a new slice still means importing createSlice, declaring an initial state and its type, writing each reducer signature, and — for anything async — adding createAsyncThunk calls plus the pending/fulfilled/rejected cases in extraReducers. This generator assembles that scaffold from a short form. Enter a slice name, add the synchronous reducer names you want and any async thunk names, and it outputs a complete slice file: a createSlice call with a typed initial state (value, loading, error), stub reducers using PayloadAction, createAsyncThunk implementations with a fetch + try/catch + rejectWithValue body, and a fully wired extraReducers builder that sets loading and error flags for each thunk. It exports the generated action creators and the reducer, and appends commented configureStore wiring. Toggle TypeScript off for a plain JavaScript slice. It all runs in the browser and the slice setup is shareable by URL.
How to Use
- 1Enter a name in the "Slice Name" field (for example counter or cart).
- 2Add synchronous reducers: type a reducer name in the field under "Reducers" and press Enter or the plus button; remove any with the trash icon.
- 3Add async thunks the same way under "Async Thunks" (for example fetchData) — these generate createAsyncThunk plus extraReducers cases.
- 4Toggle "TypeScript support" depending on whether you want a .ts or .js slice.
- 5Click "Generate Slice" and then copy or download the file (named <slice>Slice.ts or .js).
Key Benefits
- Produces a complete Redux Toolkit slice — createSlice, reducers, and exports — from a name and a list
- Async thunks generate createAsyncThunk plus matching pending/fulfilled/rejected extraReducers cases
- Reducer stubs are typed with PayloadAction when TypeScript is enabled
- Initial state includes value, loading, and error so async state handling is ready out of the box
- Auto-exports action creators (destructured from .actions) and the default reducer
- Appends commented configureStore wiring so you know where the slice plugs in
- TypeScript or JavaScript output, generated locally with a shareable URL
Common Use Cases
- Bootstrapping a feature slice (cart, auth, filters) with named reducers
- Scaffolding data-fetching state with a thunk and ready loading/error handling
- Standardizing slice structure across a team or codebase
- Learning how createAsyncThunk maps to the extraReducers builder pattern
- Quickly prototyping store state before filling in real reducer logic
Slice Configuration
Reducers
incrementdecrementresetAsync Thunks
Run to see the generated Redux Toolkit slice.
Was this tool helpful?
Share Your Experience
Help others discover this tool!
Related tools
Each thunk name you add generates a createAsyncThunk export with a typed action prefix (slice/thunkName), a fetch-based body wrapped in try/catch, and rejectWithValue for errors. It also adds an extraReducers builder block with addCase handlers for the thunk's pending, fulfilled, and rejected states that flip the loading flag and capture the error.
The slice starts with an initial state of value: 0, loading: false, and error: null. This shape gives async thunks somewhere to write loading and error status immediately; edit it in the generated file to match your real data.