Redux Toolkit Architecture and Slices0%
RTK Query for Enterprise Data Fetching

Redux Toolkit Architecture and Slices

Beginner12 min read•Updated: Jul 11, 2026
Study MaterialsCheatsheet

Redux Toolkit Architecture and Slices

1. The Renaissance of Redux with Redux Toolkit (RTK)

Historically, Redux was infamous for overwhelming boilerplate: writing actions, action types, action creators, reducers with manual object spreads, and configuring stores with multiple middleware packages.

In 2019, the Redux team released Redux Toolkit (RTK)—the official, opinionated, battery-included standard for modern Redux development.

RTK simplifies Redux by:

  • Eliminating manual action creators and action types.
  • Incorporating Immer under the hood, allowing developers to write "mutating" logic that is automatically converted into safe immutable updates!
  • Including redux-thunk by default for asynchronous actions.
  • Providing configureStore with automated DevTools and middleware setup.
Output
Legacy Redux:
ActionTypes ──► ActionCreators ──► Manual Switch Reducer with Object Spread ──► createStore()
 
Modern Redux Toolkit:
createSlice({ name, initialState, reducers }) ──► configureStore({ reducer })
(Clean, concise, and built-in Immer mutation syntax!)

2. Installation

Bash / Terminal
npm install @reduxjs/toolkit react-redux

3. Creating an RTK Slice (createSlice)

A Slice bundles a domain's initial state, reducer functions, and generated actions together into a single cohesive module:

JavaScript
// src/store/courseSlice.js
import { createSlice } from '@reduxjs/toolkit';
 
const initialState = {
enrolledCourses: [],
selectedTrack: 'all',
searchQuery: ''
};
 
export const courseSlice = createSlice({
name: 'courses',
initialState,
reducers: {
// Immer allows us to write "mutating" syntax safely!
enrollCourse: (state, action) => {
const exists = state.enrolledCourses.some(c => c.id === action.payload.id);
if (!exists) {
state.enrolledCourses.push(action.payload); // Safe via Immer!
}
},
removeCourse: (state, action) => {
state.enrolledCourses = state.enrolledCourses.filter(c => c.id !== action.payload);
},
setSelectedTrack: (state, action) => {
state.selectedTrack = action.payload;
},
setSearchQuery: (state, action) => {
state.searchQuery = action.payload;
}
}
});
 
// Automatically generated action creators!
export const { enrollCourse, removeCourse, setSelectedTrack, setSearchQuery } = courseSlice.actions;
 
// Export reducer for store configuration
export default courseSlice.reducer;

4. Configuring the Central Store (configureStore)

JavaScript
// src/store/index.js
import { configureStore } from '@reduxjs/toolkit';
import courseReducer from './courseSlice';
 
export const store = configureStore({
reducer: {
courses: courseReducer
}
});

Wrap your root in src/main.jsx:

JSX
import { Provider } from 'react-redux';
import { store } from './store';
 
<Provider store={store}>
<App />
</Provider>

5. Consuming State with useSelector and useDispatch

JSX
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { enrollCourse } from '../store/courseSlice';
 
export default function CourseCard({ course }) {
const dispatch = useDispatch();
 
// Fine-grained selector: only re-renders if this specific boolean changes!
const isEnrolled = useSelector((state) =>
state.courses.enrolledCourses.some(c => c.id === course.id)
);
 
return (
<div className="card">
<h4>{course.title}</h4>
<button
disabled={isEnrolled}
onClick={() => dispatch(enrollCourse(course))}
>
{isEnrolled ? 'Enrolled ✓' : 'Enroll Now'}
</button>
</div>
);
}
Interactive Quiz

Practice Quiz

Question 1
How does Redux Toolkit (RTK) allow developers to write direct mutations like state.items.push(item) safely?
Question 2
What is an RTK "Slice"?
Question 3
Which hook is used to dispatch actions in React-Redux?
Question 4
Which hook is used to extract data from the Redux store with selector functions?
Question 5
What function replaces the legacy createStore in modern Redux Toolkit?
Next Lesson

RTK Query for Enterprise Data Fetching

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Headless UI Architecture and Accessibility PrimitivesRTK Query for Enterprise Data Fetching

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext