Creating Slices with RTK 2.0 Auto-generated Action Types

Demonstrate how to define a slice with Redux Toolkit 2.0 that automatically generates action types and action creators, reducing boilerplate.
import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    incremented(state) {
      // The state is directly mutable here thanks to Immer
      return state + 1;
    decremented(state) {
      return state - 1;

export const { incremented, decremented } = counterSlice.actions;
export default counterSlice.reducer;
This code defines a Redux slice for a counter feature using Redux Toolkit 2.0. The 'createSlice' function generates action creators and action types automatically based on the provided 'reducers' object.
<!DOCTYPE html>
<html lang='en'>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Counter App</title>
    <div id='app'>
        <button id='incrementBtn'>Increment</button>
        <button id='decrementBtn'>Decrement</button>
        <p>Current Count: <span id='count'>0</span></p>
    <script src='./path_to_your_entry_point.js'></script>
This is the corresponding HTML structure for a simple counter app. It includes buttons for incrementing and decrementing the count and a paragraph to display the current count.
#app { display: flex; flex-direction: column; align-items: center; }
button { margin: 5px; }
Sample CSS to style the counter app. It centers the content and adds margin to the buttons.