Learning Objectives

• Set up Redux with Redux Toolkit
• Manage async API calls
• Implement React Router v6

Redux Store Setup

jsx
// store/index.js
import { configureStore } from '@reduxjs/toolkit';
import authReducer from './authSlice';
import postsReducer from './postsSlice';
export const store = configureStore({
  reducer: {
    auth: authReducer,
    posts: postsReducer,
  }
});

Async Thunk Example

jsx
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import api from '../api';
export const fetchPosts = createAsyncThunk('posts/fetchPosts', async () => {
  const response = await api.get('/posts');
  return response.data;
});
const postsSlice = createSlice({
  name: 'posts',
  initialState: { items: [], loading: false },
  extraReducers: (builder) => {
    builder
      .addCase(fetchPosts.pending, (state) => { state.loading = true; })
      .addCase(fetchPosts.fulfilled, (state, action) => {
        state.items = action.payload;
        state.loading = false;
      });
  }
});

Q1: What problem does Redux solve?

Shared state management across components without prop drilling. Centralized store, predictable updates via reducers. Q2: How does createAsyncThunk work?

Takes action type prefix and async function. Automatically dispatches pending/fulfilled/rejected actions. Handles loading and error states. Q3: What is Redux Toolkit's createSlice?

Generates action creators and reducers from a definition. Reduces boilerplate. Supports Immer for immutable updates. Join Discord PreviousMilestone 3: Authentication & AuthorizationNextMilestone 5: Real-Time Features with WebSockets