Context & State Management

function App() {
  const [user, setUser] = useState(null);
  return <Layout user={user} onLogin={setUser} />;
}

function Layout({ user, onLogin }) {
  return (
    <div className="layout">
      <NavBar user={user} onLogin={onLogin} /> {/* Layout doesn't use them, just forwards */}
    </div>
  );
}

function NavBar({ user, onLogin }) {
  return user ? <nav>Hi, {user.name}</nav> : <button onClick={() => onLogin({ name: "Rohit" })}>Log in</button>;
}

import { createContext, useContext, useState, useMemo } from "react";

const AuthContext = createContext(null);

export function AuthProvider({ children }) {
  const [user, setUser] = useState(null);

  const value = useMemo(
    () => ({
      user,
      login: (name) => setUser({ name }),
      logout: () => setUser(null),
    }),
    [user]
  );

  return <AuthContext value={value}>{children}</AuthContext>;
}

export function useAuth() {
  const ctx = useContext(AuthContext);
  if (ctx === null) {
    throw new Error("useAuth must be used inside <AuthProvider>");
  }
  return ctx;
}

// Deep in the tree — no props passed down to get here
export function NavBar() {
  const { user, login, logout } = useAuth();
  return user ? (
    <nav>
      Hi, {user.name} <button onClick={logout}>Log out</button>
    </nav>
  ) : (
    <nav>
      <button onClick={() => login("Rohit")}>Log in</button>
    </nav>
  );
}

export function Layout() {
  return (
    <div className="layout">
      <NavBar />
    </div>
  );
}

export function App() {
  return (
    <AuthProvider>
      <Layout />
    </AuthProvider>
  );
}

import { createContext, useContext, useState, useMemo } from "react";

const SettingsContext = createContext(null);

// ❌ A new object every render
export function SettingsProviderBad({ children }) {
  const [theme, setTheme] = useState("light");
  const [tick, setTick] = useState(0); // unrelated state, e.g. a clock
  return (
    <SettingsContext value={{ theme, setTheme }}>
      <button onClick={() => setTick((t) => t + 1)}>tick {tick}</button>
      {children}
    </SettingsContext>
  );
}

// ✅ The same object until theme changes
export function SettingsProviderGood({ children }) {
  const [theme, setTheme] = useState("light");
  const [tick, setTick] = useState(0);
  const value = useMemo(() => ({ theme, setTheme }), [theme]);
  return (
    <SettingsContext value={value}>
      <button onClick={() => setTick((t) => t + 1)}>tick {tick}</button>
      {children}
    </SettingsContext>
  );
}

export function ThemeBadge() {
  const { theme } = useContext(SettingsContext);
  return <span>theme: {theme}</span>;
}

// <SettingsProviderBad><ThemeBadge /></SettingsProviderBad>,  click "tick" 3 times → ThemeBadge rendered 4 times
// <SettingsProviderGood><ThemeBadge /></SettingsProviderGood>, click "tick" 3 times → ThemeBadge rendered 1 time

const C = createContext(0);

const Child = memo(function Child() {
  return <i>{useContext(C)}</i>;
});

function Root() {
  const [v, setV] = useState(0);
  return (
    <C value={v}>
      <button onClick={() => setV(v + 1)}>+</button>
      <Child />
    </C>
  );
}

// One click on "+" → Child rendered 2 times (mount + the context change)

// From my notes (React 18 style)
const CounterContext = createContext();

const CounterProvider = ({ children }) => {
  const [state, dispatch] = useReducer(counterReducer, initialState);
  return (
    <CounterContext.Provider value={{ state, dispatch }}>
      {children}
    </CounterContext.Provider>
  );
};

const CounterDisplay = () => {
  const { state } = useCounter();
  return <h1>Count: {state.count}</h1>;
};

import { createContext, useContext, useReducer } from "react";

const initialState = { count: 0 };

function counterReducer(state, action) {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    case "reset":
      return initialState;
    default:
      throw new Error(`Unknown action: ${action.type}`);
  }
}

const CountContext = createContext(null);
const DispatchContext = createContext(null);

export function CounterProvider({ children }) {
  const [state, dispatch] = useReducer(counterReducer, initialState);
  return (
    <CountContext value={state}>
      <DispatchContext value={dispatch}>{children}</DispatchContext>
    </CountContext>
  );
}

export function useCount() {
  const state = useContext(CountContext);
  if (state === null) throw new Error("useCount must be used inside <CounterProvider>");
  return state;
}

export function useCounterDispatch() {
  const dispatch = useContext(DispatchContext);
  if (dispatch === null) throw new Error("useCounterDispatch must be used inside <CounterProvider>");
  return dispatch;
}

import { CounterProvider, useCount, useCounterDispatch } from "./CounterContext";

export function CounterDisplay() {
  const { count } = useCount();
  return <h1>Count: {count}</h1>;
}

export function CounterControls() {
  const dispatch = useCounterDispatch();
  return (
    <div>
      <button onClick={() => dispatch({ type: "increment" })}>Increment</button>
      <button onClick={() => dispatch({ type: "decrement" })}>Decrement</button>
      <button onClick={() => dispatch({ type: "reset" })}>Reset</button>
    </div>
  );
}

export function App() {
  return (
    <CounterProvider>
      <CounterDisplay />
      <CounterControls />
    </CounterProvider>
  );
}

// Increment, Increment, Decrement → "Count: 1"
// Render counts: CounterDisplay 4, CounterControls 1

import { legacy_createStore as createStore, applyMiddleware } from "redux";

// Reducer: (state, action) => newState
function counter(state = { value: 0 }, action) {
  switch (action.type) {
    case "counter/incremented":
      return { value: state.value + 1 };
    case "counter/added":
      return { value: state.value + action.payload };
    default:
      return state; // every reducer sees every action: ignore the rest
  }
}

// Middleware: sees every action before the reducer does
const logger = (store) => (next) => (action) => {
  console.log("dispatching", action.type, "| before:", JSON.stringify(store.getState()));
  const result = next(action);
  console.log("            after:", JSON.stringify(store.getState()));
  return result;
};

const store = createStore(counter, applyMiddleware(logger));
const unsubscribe = store.subscribe(() => console.log("subscriber sees", store.getState().value));

store.dispatch({ type: "counter/incremented" });
store.dispatch({ type: "counter/added", payload: 5 });
unsubscribe();
store.dispatch({ type: "something/else" });

const selectValue = (state) => state.value;
console.log("final", selectValue(store.getState()));

// dispatching counter/incremented | before: {"value":0}
// subscriber sees 1
//             after: {"value":1}
// dispatching counter/added | before: {"value":1}
// subscriber sees 6
//             after: {"value":6}
// dispatching something/else | before: {"value":6}
//             after: {"value":6}
// final 6

store.dispatch(() => {});
// Error: Actions must be plain objects. Instead, the actual type was: 'function'.
// You may need to add middleware to your store setup to handle dispatching other values,
// such as 'redux-thunk' to handle dispatching functions.

store.dispatch({ payload: 1 });
// Error: Actions may not have an undefined "type" property.
// You may have misspelled an action type string constant.

// Action types
export const ADD_TODO = "ADD_TODO";
export const TOGGLE_TODO = "TOGGLE_TODO";
export const REMOVE_TODO = "REMOVE_TODO";

// Action creators
let nextId = 1;
export const addTodo = (text) => ({ type: ADD_TODO, payload: { id: nextId++, text } });
export const toggleTodo = (id) => ({ type: TOGGLE_TODO, payload: id });
export const removeTodo = (id) => ({ type: REMOVE_TODO, payload: id });

import { combineReducers } from "redux";
import { ADD_TODO, TOGGLE_TODO, REMOVE_TODO } from "./actions";

function todos(state = [], action) {
  switch (action.type) {
    case ADD_TODO:
      return [...state, { ...action.payload, completed: false }];
    case TOGGLE_TODO:
      return state.map((todo) =>
        todo.id === action.payload ? { ...todo, completed: !todo.completed } : todo
      );
    case REMOVE_TODO:
      return state.filter((todo) => todo.id !== action.payload);
    default:
      return state;
  }
}

function filter(state = "all", action) {
  return action.type === "SET_FILTER" ? action.payload : state;
}

export const rootReducer = combineReducers({ todos, filter });
// state shape: { todos: [...], filter: "all" }

import { legacy_createStore as createStore } from "redux";
import { createRoot } from "react-dom/client";
import { Provider } from "react-redux";
import { rootReducer } from "./reducers";
import App from "./App";

const store = createStore(rootReducer);

createRoot(document.getElementById("root")).render(
  <Provider store={store}>
    <App />
  </Provider>
);

import { connect } from "react-redux";
import { toggleTodo, removeTodo } from "./actions";

// A plain component: it only knows about props
function TodoList({ todos, onToggle, onRemove }) {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>
          <label>
            <input type="checkbox" checked={todo.completed} onChange={() => onToggle(todo.id)} />
            {todo.text}
          </label>
          <button onClick={() => onRemove(todo.id)}>✕</button>
        </li>
      ))}
    </ul>
  );
}

// Which slice of the store becomes props
const mapStateToProps = (state) => ({
  todos: state.filter === "done" ? state.todos.filter((t) => t.completed) : state.todos,
});

// Which actions become callback props
const mapDispatchToProps = (dispatch) => ({
  onToggle: (id) => dispatch(toggleTodo(id)),
  onRemove: (id) => dispatch(removeTodo(id)),
});

export default connect(mapStateToProps, mapDispatchToProps)(TodoList);

import { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { addTodo } from "./actions";

export function AddTodo() {
  const [text, setText] = useState("");
  const dispatch = useDispatch();
  const remaining = useSelector((state) => state.todos.filter((t) => !t.completed).length);

  function handleSubmit(e) {
    e.preventDefault();
    if (!text.trim()) return;
    dispatch(addTodo(text));
    setText("");
  }

  return (
    <form onSubmit={handleSubmit}>
      <input aria-label="New todo" value={text} onChange={(e) => setText(e.target.value)} />
      <button>Add</button>
      <span>{remaining} left</span>
    </form>
  );
}

// Add "Learn thunk", add "Learn RTK" → "2 left"; tick "Learn thunk" → "1 left"
// store.getState(): {"todos":[{"id":1,"text":"Learn thunk","completed":true},
//                             {"id":2,"text":"Learn RTK","completed":false}],"filter":"all"}

const thunk = ({ dispatch, getState }) => (next) => (action) => {
  if (typeof action === "function") {
    return action(dispatch, getState); // an errand runner: run it, don't pass it on
  }
  return next(action); // a letter: pass it on to the reducer
};

// Plain action creators: return OBJECTS (letters)
export const fetchUsersRequest = () => ({ type: "FETCH_USERS_REQUEST" });
export const fetchUsersSuccess = (users) => ({ type: "FETCH_USERS_SUCCESS", payload: users });
export const fetchUsersFailure = (error) => ({ type: "FETCH_USERS_FAILURE", payload: error });

// Thunk action creator: returns a FUNCTION (an errand runner)
export const fetchUsers = () => {
  return async (dispatch, getState) => {
    dispatch(fetchUsersRequest());
    try {
      const response = await fetch("https://jsonplaceholder.typicode.com/users");
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      const users = await response.json();
      dispatch(fetchUsersSuccess(users));
    } catch (error) {
      dispatch(fetchUsersFailure(error.message));
    }
  };
};

const initialState = { loading: false, users: [], error: "" };

export function userReducer(state = initialState, action) {
  switch (action.type) {
    case "FETCH_USERS_REQUEST":
      return { ...state, loading: true, error: "" };
    case "FETCH_USERS_SUCCESS":
      return { loading: false, users: action.payload, error: "" };
    case "FETCH_USERS_FAILURE":
      return { loading: false, users: [], error: action.payload };
    default:
      return state;
  }
}

import { legacy_createStore as createStore, applyMiddleware } from "redux";
import { thunk } from "redux-thunk"; // named export since redux-thunk 3
import { userReducer } from "./reducer";

export const store = createStore(userReducer, applyMiddleware(thunk));

import { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { fetchUsers } from "./actions";

export function UserList() {
  const dispatch = useDispatch();
  const users = useSelector((state) => state.users);
  const loading = useSelector((state) => state.loading);
  const error = useSelector((state) => state.error);

  useEffect(() => {
    dispatch(fetchUsers());
  }, [dispatch]);

  if (loading) return <h2>Loading...</h2>;
  if (error) return <h2>{error}</h2>;
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

console.log("1. dispatching the thunk");
const promise = store.dispatch(fetchUsers());
console.log("2. dispatch returned:", promise instanceof Promise ? "a Promise" : promise,
            "| loading =", store.getState().loading);
await promise;
console.log("3. after await | state =", JSON.stringify(store.getState()));

// 1. dispatching the thunk
// → FETCH_USERS_REQUEST
// 2. dispatch returned: a Promise | loading = true
// → FETCH_USERS_SUCCESS
// 3. after await | state = {"loading":false,"users":[{"id":1,"name":"Leanne Graham"}],"error":""}

const fetchUsersIfNeeded = () => (dispatch, getState) => {
  if (getState().users.length > 0) return Promise.resolve("cached");
  return dispatch(fetchUsers());
};

await store.dispatch(fetchUsersIfNeeded()); // fetches
await store.dispatch(fetchUsersIfNeeded()); // → "cached", fetch called 1 time in total

fetchRequest();          // {"type":"fetch/fetchRequest"}
fetchSuccess([1, 2]);    // {"type":"fetch/fetchSuccess","payload":[1,2]}
fetchSuccess.type;       // "fetch/fetchSuccess"
fetchSuccess.match({ type: "fetch/fetchSuccess" }); // true

const before = fetchReducer(undefined, { type: "@@init" });
const after = fetchReducer(before, fetchRequest());
// before: {"data":null,"loading":false,"error":null}
// after:  {"data":null,"loading":true,"error":null}   Object.isFrozen(after) → true

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

let nextId = 1;

const todosSlice = createSlice({
  name: "todos",
  initialState: { items: [], filter: "all" },
  reducers: {
    todoAdded: {
      reducer(state, action) {
        state.items.push({ ...action.payload, completed: false });
      },
      prepare(text) {
        return { payload: { id: nextId++, text } };
      },
    },
    todoToggled(state, action) {
      const todo = state.items.find((t) => t.id === action.payload);
      if (todo) todo.completed = !todo.completed;
    },
    todoRemoved(state, action) {
      state.items = state.items.filter((t) => t.id !== action.payload);
    },
    filterChanged(state, action) {
      state.filter = action.payload;
    },
  },
  selectors: {
    selectRemaining: (state) => state.items.filter((t) => !t.completed).length,
  },
});

export const { todoAdded, todoToggled, todoRemoved, filterChanged } = todosSlice.actions;
export const { selectRemaining } = todosSlice.selectors;
export default todosSlice.reducer;

// Derived arrays need memoising so useSelector gets the same reference back
export const selectVisibleTodos = createSelector(
  [(state) => state.todos.items, (state) => state.todos.filter],
  (items, filter) => (filter === "done" ? items.filter((t) => t.completed) : items)
);

import { configureStore } from "@reduxjs/toolkit";
import todosReducer from "./todosSlice";

export const store = configureStore({
  reducer: {
    todos: todosReducer,
  },
});

import { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { todoAdded, todoToggled, selectRemaining, selectVisibleTodos } from "./todosSlice";

export function Todos() {
  const [text, setText] = useState("");
  const dispatch = useDispatch();
  const todos = useSelector(selectVisibleTodos);
  const remaining = useSelector(selectRemaining);

  return (
    <>
      <form
        onSubmit={(e) => {
          e.preventDefault();
          dispatch(todoAdded(text));
          setText("");
        }}
      >
        <input aria-label="New todo" value={text} onChange={(e) => setText(e.target.value)} />
        <button>Add</button>
      </form>
      <ul>
        {todos.map((t) => (
          <li key={t.id}>
            <label>
              <input type="checkbox" checked={t.completed} onChange={() => dispatch(todoToggled(t.id))} />
              {t.text}
            </label>
          </li>
        ))}
      </ul>
      <p>{remaining} left</p>
    </>
  );
}

// Add "Learn slices", add "Learn thunks", tick "Learn slices" → "1 left"
// {"todos":{"items":[{"id":2,"text":"Learn slices","completed":true},
//                    {"id":3,"text":"Learn thunks","completed":false}],"filter":"all"}}

// 1. Mutating AND returning in the same case reducer
oops(state) { state.n++; return { n: 99 }; }
// Error: [Immer] An immer producer returned a new value *and* modified its draft.
//        Either return a new value *or* modify the draft.

// 2. Mutating state outside a reducer
store.getState().todos.items[0].text = "hacked";
// TypeError: Cannot assign to read only property 'text' of object '#<Object>'

// 3. Putting a Date (or a class instance, Promise, function) in an action
dispatch({ type: "todos/todoAdded", payload: { id: 9, text: "x", due: new Date(0) } });
// console.error: A non-serializable value was detected in an action, in the path: `payload.due`.
// console.error: A non-serializable value was detected in the state, in the path: `todos.items.0.due`.

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

export const fetchUsers = createAsyncThunk(
  "users/fetchUsers",
  async (_arg, { signal, rejectWithValue }) => {
    const response = await fetch("https://jsonplaceholder.typicode.com/users", { signal });
    if (!response.ok) {
      return rejectWithValue(`Server said ${response.status}`);
    }
    return response.json(); // becomes action.payload of "fulfilled"
  },
  {
    // Skip the request if one is already running or the data is already here
    condition: (_arg, { getState }) => {
      const { status } = getState().users;
      return status !== "loading" && status !== "succeeded";
    },
  }
);

const usersSlice = createSlice({
  name: "users",
  initialState: { list: [], status: "idle", error: null },
  reducers: {
    usersReset: () => ({ list: [], status: "idle", error: null }),
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchUsers.pending, (state) => {
        state.status = "loading";
        state.error = null;
      })
      .addCase(fetchUsers.fulfilled, (state, action) => {
        state.status = "succeeded";
        state.list = action.payload;
      })
      .addCase(fetchUsers.rejected, (state, action) => {
        state.status = "failed";
        state.error = action.payload ?? action.error.message;
      });
  },
});

export const { usersReset } = usersSlice.actions;
export default usersSlice.reducer;

await store.dispatch(fetchUsers());
// → users/fetchUsers/pending
// → users/fetchUsers/fulfilled [{"id":1,"name":"Leanne"}]
// state.users: {"list":[{"id":1,"name":"Leanne"}],"status":"succeeded","error":null}

const second = await store.dispatch(fetchUsers());
// (nothing dispatched)  second.type: users/fetchUsers/rejected, second.meta.condition: true
// fetch called 1 time in total

// With a 503 response:
// → users/fetchUsers/pending
// → users/fetchUsers/rejected "Server said 503"
// state.users.error: "Server said 503"

import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { fetchUsers } from "./usersSlice";

export function Users() {
  const dispatch = useDispatch();
  const { list, status, error } = useSelector((state) => state.users);

  useEffect(() => {
    dispatch(fetchUsers());
  }, [dispatch]);

  if (status === "loading" || status === "idle") return <h2>Loading...</h2>;
  if (status === "failed") return <h2>Error: {error}</h2>;
  return (
    <ul>
      {list.map((u) => (
        <li key={u.id}>{u.name}</li>
      ))}
    </ul>
  );
}

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

export const api = createApi({
  reducerPath: "api",
  baseQuery: fetchBaseQuery({ baseUrl: "http://localhost/api" }),
  tagTypes: ["Todo"],
  endpoints: (build) => ({
    getTodos: build.query({
      query: () => "todos",
      providesTags: ["Todo"],
    }),
    addTodo: build.mutation({
      query: (title) => ({ url: "todos", method: "POST", body: { title } }),
      invalidatesTags: ["Todo"], // refetch every query that provides "Todo"
    }),
  }),
});

export const { useGetTodosQuery, useAddTodoMutation } = api;

import { configureStore } from "@reduxjs/toolkit";
import { api } from "./api";

export const store = configureStore({
  reducer: { [api.reducerPath]: api.reducer },
  middleware: (getDefault) => getDefault().concat(api.middleware),
});

import { useGetTodosQuery, useAddTodoMutation } from "./api";

export function TodoList() {
  const { data: todos = [], isLoading, isFetching, error } = useGetTodosQuery();
  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error {error.status}</p>;
  return (
    <ul aria-busy={isFetching}>
      {todos.map((t) => (
        <li key={t.id}>{t.title}</li>
      ))}
    </ul>
  );
}

export function TodoCount() {
  const { data: todos = [] } = useGetTodosQuery(); // same cache entry, no second request
  return <p>{todos.length} todos</p>;
}

export function AddTodo() {
  const [addTodo, { isLoading }] = useAddTodoMutation();
  return (
    <button disabled={isLoading} onClick={() => addTodo("Learn RTK Query")}>
      Add
    </button>
  );
}

// Render <TodoList /> <TodoCount /> <AddTodo />, then click Add. Requests made:
// fetch GET /api/todos
// fetch POST /api/todos
// fetch GET /api/todos
// cache keys: [ 'getTodos(undefined)' ]

import createSagaMiddleware from "redux-saga";
import { call, put, takeLatest } from "redux-saga/effects";
import { configureStore } from "@reduxjs/toolkit";

function* fetchUsersSaga() {
  try {
    const users = yield call(api.getUsers); // "please call api.getUsers()"
    yield put({ type: "users/loaded", payload: users }); // "please dispatch this"
  } catch (err) {
    yield put({ type: "users/failed", payload: err.message });
  }
}

function* rootSaga() {
  // On every "users/requested", run fetchUsersSaga — cancelling the previous run if still going
  yield takeLatest("users/requested", fetchUsersSaga);
}

const sagaMiddleware = createSagaMiddleware();
export const store = configureStore({
  reducer: usersReducer,
  middleware: (getDefault) => getDefault({ thunk: false }).concat(sagaMiddleware),
});
sagaMiddleware.run(rootSaga);

// A component just dispatches a plain action:
// dispatch({ type: "users/requested" });

import { create } from "zustand";

export const useCartStore = create((set, get) => ({
  items: [],
  addItem: (product) =>
    set((state) => {
      const existing = state.items.find((i) => i.id === product.id);
      return {
        items: existing
          ? state.items.map((i) => (i.id === product.id ? { ...i, qty: i.qty + 1 } : i))
          : [...state.items, { ...product, qty: 1 }],
      };
    }),
  clear: () => set({ items: [] }),
  total: () => get().items.reduce((sum, i) => sum + i.price * i.qty, 0),
}));

import { useCartStore } from "./useCartStore";

export function CartBadge() {
  const count = useCartStore((state) => state.items.reduce((n, i) => n + i.qty, 0));
  return <span>🛒 {count}</span>;
}

export function AddButton({ product }) {
  const addItem = useCartStore((state) => state.addItem);
  return <button onClick={() => addItem(product)}>Add {product.name}</button>;
}

export function Total() {
  const total = useCartStore((state) => state.total());
  return <p>Total: ${total}</p>;
}

// No provider: <CartBadge /> <AddButton …Book /> <AddButton …Pen /> <Total />
// Add Book, Add Book, Add Pen → "🛒 3", "Total: $45"
// Render counts: CartBadge 4, the two AddButtons 2 (1 each)

useCartStore.getState().addItem({ id: 3, name: "Mug", price: 8 });
useCartStore.getState().items; // [{"id":3,"name":"Mug","price":8,"qty":1}]

const unsub = useCartStore.subscribe((state, prev) =>
  console.log("changed:", prev.items.length, "→", state.items.length)
);
useCartStore.getState().clear(); // changed: 1 → 0
unsub();