Skip to main content

[ ![Redux Logo](/img/redux.svg) ![Redux Logo](/img/redux.svg) **Redux
Toolkit** ](/)

[ Getting Started ](/introduction/getting-started) [ Tutorials
](/tutorials/overview) [ Usage Guide ](/usage/usage-guide) [ API
](/api/configureStore) [ RTK Query ](/rtk-query/overview) [ GitHub
](https://github.com/reduxjs/redux-toolkit)

Search

  * [ Introduction ](/introduction/getting-started)

    * [ Getting Started ](/introduction/getting-started)
    * [ Why Redux Toolkit is How To Use Redux Today ](/introduction/why-rtk-is-redux-today)
  * [ Tutorials ](/tutorials/overview)

    * [ Tutorials Overview ](/tutorials/overview)
    * [ Quick Start ](/tutorials/quick-start)
    * [ TypeScript Quick Start ](/tutorials/typescript)
    * [ RTK Query Quick Start ](/tutorials/rtk-query)
  * [ Using Redux Toolkit ](/usage/migrating-to-modern-redux)

    * [ Migrations ](/usage/migrating-to-modern-redux)

    * [ Usage Guide ](/usage/usage-guide)
    * [ Usage With TypeScript ](/usage/usage-with-typescript)
    * [ Writing Reducers with Immer ](/usage/immer-reducers)
    * [ Setup with Next.js ](/usage/nextjs)
  * [ API Reference ](/api/configureStore)

    * [ Store Setup ](/api/configureStore)

      * [ configureStore ](/api/configureStore)
      * [ getDefaultMiddleware ](/api/getDefaultMiddleware)
      * [ Immutability Middleware ](/api/immutabilityMiddleware)
      * [ Serializability Middleware ](/api/serializabilityMiddleware)
      * [ Action Creator Middleware ](/api/actionCreatorMiddleware)
      * [ createListenerMiddleware ](/api/createListenerMiddleware)
      * [ createDynamicMiddleware ](/api/createDynamicMiddleware)
      * [ getDefaultEnhancers ](/api/getDefaultEnhancers)
      * [ autoBatchEnhancer ](/api/autoBatchEnhancer)
    * [ Reducers and Actions ](/api/createReducer)

      * [ createReducer ](/api/createReducer)
      * [ createAction ](/api/createAction)
      * [ createSlice ](/api/createSlice)
      * [ createAsyncThunk ](/api/createAsyncThunk)
      * [ createEntityAdapter ](/api/createEntityAdapter)
      * [ combineSlices ](/api/combineSlices)
    * [ Other ](/api/createSelector)

      * [ createSelector ](/api/createSelector)
      * [ Matching Utilities ](/api/matching-utilities)
      * [ Other Exports ](/api/other-exports)
      * [ Codemods ](/api/codemods)
      * [ Error Messages ](/errors)
  * [ RTK Query ](/rtk-query/overview)

    * [ RTK Query Overview ](/rtk-query/overview)
    * [ Comparison with Other Tools ](/rtk-query/comparison)
    * [ Examples ](/rtk-query/usage/examples)
    * [ Usage With TypeScript ](/rtk-query/usage-with-typescript)
    * [ Using RTK Query ](/rtk-query/usage/queries)

    * [ API Reference ](/rtk-query/api/createApi)

  * [ ](/)
  * API Reference 
  * Reducers and Actions 
  * createSlice 

On this page

#  ` createSlice `

A function that accepts an initial state, an object of reducer functions, and
a "slice name", and automatically generates action creators and action types
that correspond to the reducers and state.

This API is the standard approach for writing Redux logic.

Internally, it uses [ ` createAction ` ](/api/createAction) and [ `
createReducer ` ](/api/createReducer) , so you may also use [ Immer
](/usage/immer-reducers) to write "mutating" immutable updates:

  * TypeScript 
  * JavaScript 

    
    
    import { createSlice } from '@reduxjs/toolkit'  
    import type { PayloadAction } from '@reduxjs/toolkit'  
      
    interface CounterState {  
      value: number  
    }  
      
    const initialState = { value: 0 } satisfies CounterState as CounterState  
      
    const counterSlice = createSlice({  
      name: 'counter',  
      initialState,  
      reducers: {  
        increment(state) {  
          state.value++  
        },  
        decrement(state) {  
          state.value--  
        },  
        incrementByAmount(state, action: PayloadAction<number>) {  
          state.value += action.payload  
        },