Introduction to Redux – Predictable State Management - Learn REACTJS | Revochamp

Name: Introduction to Redux – Predictable State Management
Availability: InStock
Author: Revochamp

What is Redux?

Redux is a pattern and library for managing and updating application state, using events called 'actions.' It serves as a centralized store for state that needs to be used across your entire application, with rules ensuring that the state can only be updated in a predictable fashion.

The Three Core Principles

Single Source of Truth: The global state of your application is stored in an object tree within a single store.
State is Read-Only: The only way to change the state is to emit an action, an object describing what happened.
Changes are made with Pure Functions: To specify how the state tree is transformed by actions, you write pure reducers.

Redux Data Flow

Redux uses a 'one-way data flow' app structure. An event triggers an Action, which is Dispatched to the Store. The Store runs the Reducer to calculate the new state, and the UI updates to reflect the change.

Redux Toolkit (RTK) – The Modern Way

In 2026, we no longer write 'vanilla' Redux. We use Redux Toolkit (RTK), which simplifies the process by handling the boilerplate and allowing us to write 'mutating' logic that is actually turned into safe, immutable updates using Immer.

React JSXRead-only

import { createSlice, configureStore } from '@reduxjs/toolkit';

// 1. Create a Slice (Logic & State together)
const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1; // Look like mutation, but RTK handles it safely!
    },
    decrement: (state) => {
      state.value -= 1;
    }
  }
});

// 2. Export Actions and Store
export const { increment, decrement } = counterSlice.actions;
export const store = configureStore({
  reducer: { counter: counterSlice.reducer }
});

import { createSlice, configureStore } from '@reduxjs/toolkit';

// 1. Create a Slice (Logic & State together)
const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1; // Look like mutation, but RTK handles it safely!
    },
    decrement: (state) => {
      state.value -= 1;
    }
  }
});

// 2. Export Actions and Store
export const { increment, decrement } = counterSlice.actions;
export const store = configureStore({
  reducer: { counter: counterSlice.reducer }
});

Connecting React to Redux

To use Redux in your React components, you use two primary hooks: useSelector to read data from the store, and useDispatch to send actions to the store.

React JSXRead-only

import { useSelector, useDispatch } from 'react-redux';
import { increment } from './counterSlice';

function Counter() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <button onClick={() => dispatch(increment())}>
      Count is: {count}
    </button>
  );
}

import { useSelector, useDispatch } from 'react-redux';
import { increment } from './counterSlice';

function Counter() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <button onClick={() => dispatch(increment())}>
      Count is: {count}
    </button>
  );
}

Redux vs. Context API

Feature	Context API	Redux Toolkit
Purpose	Dependency Injection	State Management
Performance	Re-renders all consumers	Selective re-renders (Selectors)
Debugging	Basic (React DevTools)	Powerful (Redux DevTools)
Boilerplate	Very Low	Moderate
Middlewares	No native support	Excellent (Thunk, Saga)

Try it yourself

import React from 'react';
import { Provider, useSelector, useDispatch } from 'react-redux';
import { configureStore, createSlice } from '@reduxjs/toolkit';

// Step 1: Create Slice
const themeSlice = createSlice({
  name: 'theme',
  initialState: { isDark: false },
  reducers: {
    toggleTheme: (state) => { state.isDark = !state.isDark; }
  }
});

// Step 2: Configure Store
const store = configureStore({ reducer: { theme: themeSlice.reducer } });
const { toggleTheme } = themeSlice.actions;

// Step 3: UI Component
function ThemeSwitcher() {
  const isDark = useSelector(state => state.theme.isDark);
  const dispatch = useDispatch();

  return (
    <div style={{ 
      background: isDark ? '#333' : '#fff', 
      color: isDark ? '#fff' : '#000', 
      padding: '20px' 
    }}>
      <h3>Redux Theme Demo</h3>
      <button onClick={() => dispatch(toggleTheme())}>
        Switch to {isDark ? 'Light' : 'Dark'} Mode
      </button>
    </div>
  );
}

export default function App() {
  return (
    <Provider store={store}>
      <ThemeSwitcher />
    </Provider>
  );
}

Test Your Knowledge

of 3

What is the function of a 'Dispatch' in Redux?

To delete the state

To send an action to the store

To render the component

To fetch data from an API

of 3

Which Redux Toolkit function is used to create both actions and reducers at once?

createReducer

createAction

createSlice

configureStore

of 3

Which hook is used to access data from the Redux store?

useStore

useDispatch

useSelector

useState

Frequently Asked Questions

When should I use Redux?

Use Redux when you have large amounts of application state that are needed in many places in the app, the app state is updated frequently, or the logic to update that state is complex.

What is a Reducer?

A reducer is a pure function that takes the current state and an action, and returns the next state: (state, action) => newState.

What are Redux DevTools?

It's a browser extension that lets you track when, where, why, and how your application's state changed, with features like 'time-travel debugging'.

import { createSlice, configureStore } from '@reduxjs/toolkit'; // 1. Create a Slice (Logic & State together) const counterSlice = createSlice({ name: 'counter', initialState: { value: 0 }, reducers: { increment: (state) => { state.value += 1; // Look like mutation, but RTK handles it safely! }, decrement: (state) => { state.value -= 1; } } }); // 2. Export Actions and Store export const { increment, decrement } = counterSlice.actions; export const store = configureStore({ reducer: { counter: counterSlice.reducer } });

import { useSelector, useDispatch } from 'react-redux'; import { increment } from './counterSlice'; function Counter() { const count = useSelector((state) => state.counter.value); const dispatch = useDispatch(); return ( <button onClick={() => dispatch(increment())}> Count is: {count} </button> ); }

Feature

Context API

Redux Toolkit

Purpose

Dependency Injection

State Management

Performance

Re-renders all consumers

Selective re-renders (Selectors)

Debugging

Basic (React DevTools)

Powerful (Redux DevTools)

Boilerplate

Very Low

Moderate

Middlewares

No native support

Excellent (Thunk, Saga)

Try it yourself

import React from 'react';
import { Provider, useSelector, useDispatch } from 'react-redux';
import { configureStore, createSlice } from '@reduxjs/toolkit';

// Step 1: Create Slice
const themeSlice = createSlice({
  name: 'theme',
  initialState: { isDark: false },
  reducers: {
    toggleTheme: (state) => { state.isDark = !state.isDark; }
  }
});

// Step 2: Configure Store
const store = configureStore({ reducer: { theme: themeSlice.reducer } });
const { toggleTheme } = themeSlice.actions;

// Step 3: UI Component
function ThemeSwitcher() {
  const isDark = useSelector(state => state.theme.isDark);
  const dispatch = useDispatch();

  return (
    <div style={{ 
      background: isDark ? '#333' : '#fff', 
      color: isDark ? '#fff' : '#000', 
      padding: '20px' 
    }}>
      <h3>Redux Theme Demo</h3>
      <button onClick={() => dispatch(toggleTheme())}>
        Switch to {isDark ? 'Light' : 'Dark'} Mode
      </button>
    </div>
  );
}

export default function App() {
  return (
    <Provider store={store}>
      <ThemeSwitcher />
    </Provider>
  );
}

Test Your Knowledge

of 3

What is the function of a 'Dispatch' in Redux?

To delete the state

To send an action to the store

To render the component

To fetch data from an API

of 3

Which Redux Toolkit function is used to create both actions and reducers at once?

createReducer

createAction

createSlice

configureStore

of 3

Which hook is used to access data from the Redux store?

useStore

useDispatch

useSelector

useState

Frequently Asked Questions

When should I use Redux?

Use Redux when you have large amounts of application state that are needed in many places in the app, the app state is updated frequently, or the logic to update that state is complex.

What is a Reducer?

A reducer is a pure function that takes the current state and an action, and returns the next state: (state, action) => newState.

What are Redux DevTools?

It's a browser extension that lets you track when, where, why, and how your application's state changed, with features like 'time-travel debugging'.

Introduction to Redux – Predictable State Management

Introduction to Redux – Predictable State Management

What is Redux?

The Three Core Principles

Redux Data Flow

Redux Toolkit (RTK) – The Modern Way

Connecting React to Redux

Redux vs. Context API

Try it yourself

Test Your Knowledge

Frequently Asked Questions

Need help?

Introduction to Redux – Predictable State Management

Introduction to Redux – Predictable State Management

What is Redux?

The Three Core Principles

Redux Data Flow

Redux Toolkit (RTK) – The Modern Way

Connecting React to Redux

Redux vs. Context API

Try it yourself

Test Your Knowledge

Frequently Asked Questions

Need help?