Using Redux Toolkit’s createSlice

Show how to define a slice of state using createSlice in Redux Toolkit and integrating it into the store.
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice'; // import the slice

export const store = configureStore({
  reducer: {
    counter: counterReducer, // hook the slice into our store
This piece of code creates a Redux store and integrates the counter slice reducer into it. The `configureStore` method is provided by Redux Toolkit to simplify store setup. The `counterReducer` is imported from a file where it's defined and then added to the store under the `counter` key.
import { createSlice } from '@reduxjs/toolkit';

// Define initial state for the counter
const initialState = {
  value: 0,

// Create a slice for the counter feature
export const counterSlice = createSlice({
  name: 'counter',
  reducers: {
    increment: state => {
      state.value += 1;
    decrement: state => {
      state.value -= 1;
    incrementByAmount: (state, action) => {
      state.value += action.payload;

// Export the reducer actions and reducer
export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;
This code snippet demonstrates how to use `createSlice` from Redux Toolkit to define a slice of state for a counter feature. The slice includes the slice name, initial state, and reducers for incrementing and decrementing the value, as well as an additional reducer that increments by a specific amount. The reducers manage state changes, and exported actions allow the rest of the app to interact with the state.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <title>Counter App</title>
  <div id="app">
    <!-- This is where our counter app will be displayed -->
  <script src="./main.js"></script>
Basic HTML structure for the counter app. It defines where the counter will be rendered within the `div#app` tag. It links to the JavaScript file 'main.js' where the Redux store and counter UI logic will be executed.
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  font-family: Arial, sans-serif;

#app {
  text-align: center;
Simple CSS to style the counter app. It centers the contents of the body element in the viewport and resets the default margin. The `#app` gives a text-align style to the counter container for better visual.