How are action creators generated by createSlice()?

Q: How are action creators generated by createSlice()?

In Redux Toolkit, when you define reducers inside `createSlice()`, it **automatically generates** corresponding action creators for each reducer function. These action creators simplify dispatching actions without manually defining action types or creators. `createSlice()` takes the slice name and reducer keys to generate unique action types like **`sliceName/reducerName`**. It **returns an object called `actions`** that contains functions (action creators) for each reducer. When called, an action creator returns an object with `type` and optional `payload`. import { createSlice } from '@reduxjs/toolkit'; const counterSlice = createSlice({ name: 'counter', initialState: { value: 0 }, reducers: { increment: (state) => { state.value += 1; }, addByAmount: (state, action) => { state.value += action.payload; } } }); // Auto-generated action creators export const { increment, addByAmount } = counterSlice.actions; // Example usage // increment() -> { type: 'counter/increment' } // addByAmount(5) -> { type: 'counter/addByAmount', payload: 5 } export default counterSlice.reducer;

Difficulty: 6/10

createSlice, action creators, immer integration

In Redux Toolkit, when you define reducers inside createSlice(), it automatically generates corresponding action creators for each reducer function. These action creators simplify dispatching actions without manually defining action types or creators.

How It Works

1
createSlice() takes the slice name and reducer keys to generate unique action types like sliceName/reducerName.
2
It returns an object called actions that contains functions (action creators) for each reducer.
3
When called, an action creator returns an object with type and optional .

Example: Auto-Generated Action Creators

Scenario Questions

0-2 years experience

1You're using createSlice to manage a user profile state, and you notice that when you dispatch the incrementCounter action, nothing updates in the UI. What’s the most likely reason, and how would you fix it?
2You see two action creators in your slice: setUser and setUserName. How do you know which one to use when you only want to update the user’s name without touching other fields?
3You call createUserAction() from your component, but the Redux DevTools show an action type like 'user/created' instead of 'created'. Why is that?

Follow-up Questions

What happens if you try to dispatch an action creator from a different slice?
How does RTK know which reducer to associate with each action creator?
Can you override the default action creator names?