Learn Redux - Pre-Requisite Skills & Environment Setup

#Introduction

Welcome to the Learn Redux series! This series will guide you to master Redux Toolkit (RTK) — the official standard approach to state management in React applications — from fundamental concepts to production-grade architecture. There are 23 episodes in total, organized into six phases.

Redux was once considered complicated because of its boilerplate. Redux Toolkit exists to remove that complexity: the store is configured with configureStore, slices are written in a single createSlice, async work is handled simply with createAsyncThunk, and server data is managed by RTK Query. If you've ever been frustrated by prop drilling or Context whose re-renders are hard to predict, the following episodes will feel like an oasis.

But before we get into code, there are some essential skills and tools you must have. Episode 0 is your roadmap: we'll make sure your baseline skills are in place, set up a React project, install Redux Toolkit, and run the first verification. Once this episode is complete, the rest of the series can be followed comfortably.

#Essential Skills You Must Master

#Modern JavaScript (ES6+) and Basic TypeScript

Redux is a JavaScript library, so you need to be comfortable with modern syntax: destructuring, spread, arrow functions, and async/await. Redux Toolkit is also written in TypeScript and encourages using TypeScript, so a basic understanding of interfaces, type aliases, and generics will help a lot.

ES6+ skills used throughout the series

const { user, token } = state.auth
const nextItems = [...items, newItem]
const fetchUser = async (id) => {
  const res = await fetch(`/api/users/${id}`)
  return res.json()
}

state.auth is an object, and const { user, token } = state.auth is called destructuring. You'll see this pattern over and over in selectors and reducers.

#React Hooks: useState, useEffect, useContext

Redux is a state management library for React, so you must be comfortable with hooks. Understand:

• useState for local component state.
• useEffect for side effects such as fetching data.
• useContext for sharing values between components, and also the reason prop drilling feels so painful.

Starting from episode 5, you'll replace most useContext usage with Redux hooks like useSelector and useDispatch.

#The Concept of Immutability

This is the most important foundation. Immutability means state is never modified directly; every change produces new state. Redux guarantees predictability through this rule, and Immer — which is already built into RTK — lets you write code that looks like mutation while actually producing new objects behind the scenes.

Mutation vs immutable update

const state = { count: 0 }
state.count = 1
 
const nextState = { ...state, count: state.count + 1 }

{ ...state, count: state.count + 1 } uses the spread operator, so the old state is unchanged and nextState is a new object. This is a pattern you'll use repeatedly, even though inside createSlice immutable updates are handled automatically by Immer.

#Software You Need to Set Up

#Node.js 18+ and a Package Manager

Redux Toolkit requires Node.js version 18 or newer. Check your version:

node --version
npm --version

The output should show at least v18.0.0. Alternatively, you can use Bun, which is faster:

bun --version

Throughout this series, the command examples use npm, but everything can be run with bun add or bun install if you're more comfortable with Bun.

#Redux DevTools Extension

Redux DevTools is a browser extension (Chrome and Firefox) that becomes your primary debugging weapon. Install it now — just grab it from the browser store, no extra configuration needed.

#Creating a React Project

For a new project, Vite is the lightest choice:

npm create vite@latest rtk-app -- --template react-ts
cd rtk-app
npm install

npm create vite@latest creates a React + TypeScript project. You can also add Redux to an existing Next.js project — we cover that approach in depth in episode 14.

#Installing Redux Toolkit

#Installing the Packages

Two packages are required: @reduxjs/toolkit (the core library) and react-redux (the bridge between Redux and React):

npm install @reduxjs/toolkit react-redux

With Bun:

bun add @reduxjs/toolkit react-redux

@reduxjs/toolkit bundles Redux core, Immer, Reselect, and Redux Thunk. One install, and the entire foundation is in place.

#Verifying the Installation

Make sure the installed versions are correct:

npm list @reduxjs/toolkit react-redux

As of the writing of this series, the latest versions are Redux Toolkit v2.12.0 and Redux core v5.x. To check the latest version at any time:

npm view @reduxjs/toolkit version

Make a note of the result, because episode 20 covers the latest stable features of the 2.x release line.

#Verifying the Environment

#First Test with Code

Create a src/store.ts file and write your first store:

Your first Redux store

import { configureStore } from "@reduxjs/toolkit"
 
const store = configureStore({
  reducer: {},
})
 
console.log(store.getState())

store.getState() should return an empty object without errors. We'll break down every line of the code above in episode 3 — for now, the goal is simply to confirm the whole environment works.

#Readiness Checklist

A summary of the prerequisites you've set up in episode 0:

• Node.js 18+ with npm or Bun.
• Modern JavaScript: destructuring, spread, async/await, and basic TypeScript.
• React hooks: useState, useEffect, useContext.
• The concept of immutability: every state change produces a new object.
• Redux DevTools installed in the browser.
• Redux Toolkit + react-redux installed and the first store successfully created.

If any of these is missing, stop and complete it before moving on. A solid foundation will make the next 22 episodes feel much lighter.

#Conclusion

In episode 0 you've laid the groundwork for the entire series: mastered the essential JavaScript and React skills, understood immutability, set up a React project with Vite, installed Redux Toolkit v2.12.0, and verified your first store.

Key takeaways:

• Redux Toolkit is the official standard for state management in React, built on top of Redux core.
• Install @reduxjs/toolkit and react-redux on a project that already has React.
• Understand destructuring, spread, and async/await before moving on.
• Immutability is the golden rule: never mutate state directly.
• configureStore creates a store with DevTools and default middleware automatically.
• The Redux DevTools extension is a must-have from the very beginning.

In the next episode, episode 1, we'll cover the history, background, and why you need Redux — from prop drilling, the birth of Flux by Facebook, the creation of Redux by Dan Abramov, to its evolution into Redux Toolkit. Make sure your environment is ready, because the Learn Redux journey is just beginning!