⚙️ Day 30 — Redux Toolkit Basics

Redux Toolkit (RTK) is the official, recommended way to write Redux logic. It simplifies store setup, reduces boilerplate, and provides utilities for managing asynchronous actions.

🔹 1. Create Slice

The createSlice() function automatically generates action creators and action types based on the reducers you write.

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

const counterSlice = createSlice({
  name: "counter",
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1; },
    decrement: (state) => { state.value -= 1; },
  },
});

export const { increment, decrement } = counterSlice.actions;

const store = configureStore({
  reducer: { counter: counterSlice.reducer },
});

store.subscribe(() => console.log(store.getState()));
store.dispatch(increment());
  

🔹 2. Handling Async Logic with `createAsyncThunk()`

You can handle asynchronous calls like fetching data easily using RTK’s createAsyncThunk.

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

export const fetchUsers = createAsyncThunk("users/fetch", async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/users");
  return res.json();
});

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

💡 Benefits of Redux Toolkit

• Less boilerplate, cleaner code.
• Built-in support for async operations.
• Improved developer experience with DevTools.

← Prev Next →