L1: Setup Redux Store

Welcome to Module 6! In this module, we'll introduce Redux Toolkit - a powerful state management library that allows you to share state across your entire application.

Why Redux?

So far, we've managed state locally within components using useState. This works great for simple apps, but as your application grows, you'll face challenges:

Problems with Local State:

Redux Solutions:

• Single source of truth - One global store for all shared state
• Predictable updates - State changes through pure functions
• Easy debugging - Track every state change with DevTools
• No prop drilling - Access state from any component

Redux Architecture

Redux uses a unidirectional data flow:

┌─────────────────────────────────────────────┐
│                                             │
│  Component dispatches Action                │
│         │                                   │
│         ↓                                   │
│  Store receives Action                      │
│         │                                   │
│         ↓                                   │
│  Reducer updates State                      │
│         │                                   │
│         ↓                                   │
│  Component re-renders with new State       │
│         │                                   │
│         └─────────────────────────────────────┘

Key Concepts:

{
  listings: {
    items: [],
    favorites: [],
    status: 'idle'
  },
  user: {
    profile: null,
    isAuthenticated: false
  }
}

{ type: 'listings/toggleFavorite', payload: 123 }
{ type: 'user/signIn', payload: { email, password } }

function listingsReducer(state, action) {
  switch (action.type) {
    case 'listings/toggleFavorite':
      // Return new state
      return { ...state, favorites: [...state.favorites, action.payload] };
    default:
      return state;
  }
}

Redux Toolkit

Redux Toolkit is the official, recommended way to write Redux code. It simplifies Redux significantly:

Traditional Redux:

// ~50 lines of boilerplate per feature
const ADD_TODO = 'ADD_TODO';
const addTodo = (text) => ({ type: ADD_TODO, payload: text });
function todosReducer(state = [], action) {
  switch (action.type) {
    case ADD_TODO:
      return [...state, { id: Date.now(), text: action.payload }];
    default:
      return state;
  }
}

Redux Toolkit:

// ~10 lines, same functionality
const todosSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    addTodo: (state, action) => {
      state.push({ id: Date.now(), text: action.payload });
    }
  }
});

Redux Toolkit includes:

• ✅ configureStore() - Simplified store setup
• ✅ createSlice() - Combines actions + reducers
• ✅ createAsyncThunk() - Handle async logic
• ✅ Immer built-in - Write "mutating" code safely
• ✅ Redux DevTools - Pre-configured

What We're Building

In this lesson, we'll:

1. Install Redux Toolkit - Add the library to our project
2. Create the store - Set up the Redux store
3. Configure the store - Add basic configuration

By the end, you'll have a working Redux store ready to hold application state!

Step 1: Install Redux Toolkit

Redux Toolkit comes as two packages:

• @reduxjs/toolkit - Redux Toolkit core
• react-redux - React bindings for Redux

Install both packages:

npm install @reduxjs/toolkit react-redux

What's the difference?

• @reduxjs/toolkit provides Redux logic (store, slices, thunks)
• react-redux connects Redux to React (hooks like useSelector, useDispatch)

Step 2: Create Store File

Create a new directory and file for our Redux store:

mkdir -p src/state
touch src/state/store.js

This file will configure and export our Redux store.

Step 3: Configure Store

Open src/state/store.js and add:

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

export const store = configureStore({
  reducer: {
    // Reducers will be added here
  },
});

What's happening here?

Understanding the Redux Store

The store is an object with three main methods:

import { store } from './state/store';

const currentState = store.getState();
console.log(currentState);
// {
//   listings: { items: [], favorites: [] },
//   user: { profile: null }
// }

import { store } from './state/store';

store.dispatch({ 
  type: 'listings/toggleFavorite', 
  payload: 123 
});

import { store } from './state/store';

const unsubscribe = store.subscribe(() => {
  console.log('State changed:', store.getState());
});

// Later: stop listening
unsubscribe();

Verify Setup

Let's verify the store is configured correctly. Add a temporary log:

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

export const store = configureStore({
  reducer: {
    // Reducers will be added here
  },
});

// Temporary: verify store works
console.log('Redux store configured:', store.getState());

You should see an empty object logged when the app loads:

Redux store configured: {}

Note: Remove this console.log after verifying - we'll access state properly through React hooks!

What's Next?

Great! You've set up the Redux store. In the next lesson, we'll:

1. Connect Redux to React - Add the Provider component
2. Make store available - Wrap our app with Redux
3. Verify connection - Ensure components can access the store

Key Takeaways

• ✅ Redux provides a single source of truth for application state
• ✅ Redux Toolkit simplifies Redux with less boilerplate
• ✅ configureStore() creates a store with good defaults
• ✅ The store has three methods: getState(), dispatch(), subscribe()
• ✅ Empty reducer object is valid - we'll add slices next!