Redux Toolkit (RTK) – The Modern Standard - Learn REACTJS | Revochamp

Name: Redux Toolkit (RTK) – The Modern Standard
Availability: InStock
Author: Revochamp

Why Redux Toolkit?

Redux Toolkit (RTK) was created to solve three common complaints about Redux: 'Configuring a store is too complicated', 'I have to add a lot of packages to get Redux to do anything useful', and 'Redux requires too much boilerplate code'. RTK is now the official, recommended way to write Redux logic.

The Anatomy of a Slice

A 'Slice' is the collection of Redux reducer logic and actions for a single feature in your app. It uses Immer internally, which allows you to write 'mutative' code that is safely converted into immutable updates.

React JSXRead-only

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

const cartSlice = createSlice({
  name: 'cart',
  initialState: { items: [], total: 0 },
  reducers: {
    addItem: (state, action) => {
      // Immer allows this 'push' safely!
      state.items.push(action.payload);
      state.total += action.payload.price;
    },
    removeItem: (state, action) => {
      state.items = state.items.filter(item => item.id !== action.payload);
    }
  }
});

export const { addItem, removeItem } = cartSlice.actions;
export default cartSlice.reducer;

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

const cartSlice = createSlice({
  name: 'cart',
  initialState: { items: [], total: 0 },
  reducers: {
    addItem: (state, action) => {
      // Immer allows this 'push' safely!
      state.items.push(action.payload);
      state.total += action.payload.price;
    },
    removeItem: (state, action) => {
      state.items = state.items.filter(item => item.id !== action.payload);
    }
  }
});

export const { addItem, removeItem } = cartSlice.actions;
export default cartSlice.reducer;

Handling Async Logic with createAsyncThunk

For API calls, RTK provides createAsyncThunk. It generates promise lifecycle action types (pending, fulfilled, and rejected) which you can handle in the extraReducers field of your slice.

React JSXRead-only

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

export const fetchUsers = createAsyncThunk('users/fetchAll', async () => {
  const response = await fetch('https://api.example.com/users');
  return response.json();
});

const userSlice = createSlice({
  name: 'users',
  initialState: { data: [], status: 'idle' },
  extraReducers: (builder) => {
    builder
      .addCase(fetchUsers.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchUsers.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.data = action.payload;
      });
  }
});

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

export const fetchUsers = createAsyncThunk('users/fetchAll', async () => {
  const response = await fetch('https://api.example.com/users');
  return response.json();
});

const userSlice = createSlice({
  name: 'users',
  initialState: { data: [], status: 'idle' },
  extraReducers: (builder) => {
    builder
      .addCase(fetchUsers.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchUsers.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.data = action.payload;
      });
  }
});

RTK Query: The Future of Data Fetching

RTK Query is an optional addon included in the Redux Toolkit package. It is a powerful data fetching and caching tool designed to simplify loading data in a web application, eliminating the need to hand-write fetch logic or manage loading states manually.

Feature	Standard RTK	RTK Query
Data Management	Manual (Slices/Thunks)	Automated (Hooks)
Caching	Manual implementation	Automatic based on endpoints
Loading States	Manual (extraReducers)	Provided automatically (isLoading)
Boilerplate	Moderate	Minimal

Try it yourself

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

// 1. Create Slice
const todoSlice = createSlice({
  name: 'todos',
  initialState: { list: [] },
  reducers: {
    addTodo: (state, action) => {
      state.list.push(action.payload);
    }
  }
});

// 2. Configure Store
const store = configureStore({ reducer: { todos: todoSlice.reducer } });
const { addTodo } = todoSlice.actions;

// 3. UI Component
function TodoApp() {
  const todos = useSelector(state => state.todos.list);
  const dispatch = useDispatch();

  const handleAdd = () => {
    const text = prompt('Enter Task:');
    if (text) dispatch(addTodo(text));
  };

  return (
    <div style={{ padding: '20px' }}>
      <h3>RTK Todo List</h3>
      <button onClick={handleAdd}>Add Item</button>
      <ul>
        {todos.map((todo, i) => <li key={i}>{todo}</li>)}
      </ul>
    </div>
  );
}

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

Test Your Knowledge

of 3

Which RTK function is used to set up the Redux Store with middleware and DevTools?

createStore

configureStore

setupStore

initStore

of 3

What library does RTK use to allow 'mutative' logic in reducers?

Axios

Zod

Immer

Lodash

of 3

Where do you handle createAsyncThunk actions in a slice?

reducers

extraReducers

initialState

actions

Frequently Asked Questions

Can I use RTK with existing 'Vanilla' Redux?

Yes. RTK is fully compatible with existing reducers and actions. You can migrate your store to configureStore and move logic to slices one piece at a time.

Does RTK replace Redux DevTools?

No, it integrates with them perfectly. configureStore automatically enables the Redux DevTools extension for you.

What is Immer?

Immer is a library that RTK uses to allow you to write code that looks like you're mutating state (e.g., state.push()), but it creates a brand new immutable state object under the hood.

import { createSlice } from '@reduxjs/toolkit'; const cartSlice = createSlice({ name: 'cart', initialState: { items: [], total: 0 }, reducers: { addItem: (state, action) => { // Immer allows this 'push' safely! state.items.push(action.payload); state.total += action.payload.price; }, removeItem: (state, action) => { state.items = state.items.filter(item => item.id !== action.payload); } } }); export const { addItem, removeItem } = cartSlice.actions; export default cartSlice.reducer;

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'; export const fetchUsers = createAsyncThunk('users/fetchAll', async () => { const response = await fetch('https://api.example.com/users'); return response.json(); }); const userSlice = createSlice({ name: 'users', initialState: { data: [], status: 'idle' }, extraReducers: (builder) => { builder .addCase(fetchUsers.pending, (state) => { state.status = 'loading'; }) .addCase(fetchUsers.fulfilled, (state, action) => { state.status = 'succeeded'; state.data = action.payload; }); } });

Feature

Standard RTK

RTK Query

Data Management

Manual (Slices/Thunks)

Automated (Hooks)

Caching

Manual implementation

Automatic based on endpoints

Loading States

Manual (extraReducers)

Provided automatically (isLoading)

Boilerplate

Moderate

Minimal

Try it yourself

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

// 1. Create Slice
const todoSlice = createSlice({
  name: 'todos',
  initialState: { list: [] },
  reducers: {
    addTodo: (state, action) => {
      state.list.push(action.payload);
    }
  }
});

// 2. Configure Store
const store = configureStore({ reducer: { todos: todoSlice.reducer } });
const { addTodo } = todoSlice.actions;

// 3. UI Component
function TodoApp() {
  const todos = useSelector(state => state.todos.list);
  const dispatch = useDispatch();

  const handleAdd = () => {
    const text = prompt('Enter Task:');
    if (text) dispatch(addTodo(text));
  };

  return (
    <div style={{ padding: '20px' }}>
      <h3>RTK Todo List</h3>
      <button onClick={handleAdd}>Add Item</button>
      <ul>
        {todos.map((todo, i) => <li key={i}>{todo}</li>)}
      </ul>
    </div>
  );
}

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

Test Your Knowledge

of 3

Which RTK function is used to set up the Redux Store with middleware and DevTools?

createStore

configureStore

setupStore

initStore

of 3

What library does RTK use to allow 'mutative' logic in reducers?

Axios

Zod

Immer

Lodash

of 3

Where do you handle createAsyncThunk actions in a slice?

reducers

extraReducers

initialState

actions

Frequently Asked Questions

Can I use RTK with existing 'Vanilla' Redux?

Yes. RTK is fully compatible with existing reducers and actions. You can migrate your store to configureStore and move logic to slices one piece at a time.

Does RTK replace Redux DevTools?

No, it integrates with them perfectly. configureStore automatically enables the Redux DevTools extension for you.

What is Immer?

Immer is a library that RTK uses to allow you to write code that looks like you're mutating state (e.g., state.push()), but it creates a brand new immutable state object under the hood.

Redux Toolkit (RTK) – The Modern Standard

Redux Toolkit (RTK) – The Modern Standard

Why Redux Toolkit?

The Anatomy of a Slice

Handling Async Logic with createAsyncThunk

RTK Query: The Future of Data Fetching

Try it yourself

Test Your Knowledge

Frequently Asked Questions

Need help?

Redux Toolkit (RTK) – The Modern Standard

Redux Toolkit (RTK) – The Modern Standard

Why Redux Toolkit?

The Anatomy of a Slice

Handling Async Logic with createAsyncThunk

RTK Query: The Future of Data Fetching

Try it yourself

Test Your Knowledge

Frequently Asked Questions

Need help?