Full Stack JavaScript Developer

What is Redux Toolkit?

In React you already know local state (useState) and context for sharing data across a few components. That works well for small apps. When many screens need the same data , the logged-in user, a jobs list, saved applications, theme , passing props everywhere (prop drilling) or stuffing everything into one context gets messy.

Redux is a predictable state container: one central store, updates only through actions, and reducers that describe how state changes.

Redux Toolkit (RTK) is the official, modern way to write Redux. It removes most of the old boilerplate and gives you:

Tool	What it solves
configureStore	Create the store with good defaults (DevTools, middleware)
createSlice	Actions + reducer in one file (Immer lets you "mutate" safely)
RTK Query (createApi)	Server data: queries, mutations, cache , preferred for HTTP in new apps

Core words (keep these straight)

Term	Meaning
Store	The single object that holds app state
Slice	One feature's state + reducers (e.g. auth, ui)
Action	A plain object that says what happened ({ type, payload })
Reducer	A function that takes (state, action) and returns the next state
Dispatch	How you send an action into the store
Selector	How you read a piece of state in a component

Data always flows one way:

UI event → dispatch(action) → reducer updates store → useSelector re-renders UI

Why RTK instead of plain Context?

• Context is great for low-frequency values (theme, locale).
• Redux shines when many components read/write shared business state, especially with async APIs.
• RTK Query caches server data and handles loading/error for you.

You will still use React for components, Tailwind for UI, and TanStack Router for real URLs. RTK owns global app state, not every input's local value.

Two projects in this module

Project	Purpose
HireBoard	Guided teaching app : follow each lesson’s code
Taskly	Assessment app : same RTK pattern, different product

After each HireBoard lesson, complete the matching Assessment: Taskly step. Do not copy HireBoard file-for-file; transfer the pattern into Taskly.

Teaching project: HireBoard

In class you build HireBoard, an authenticated job dashboard, one piece per lesson:

Lesson	HireBoard piece	RTK focus
Setup	Vite + React + Tailwind + RTK	Project shell
Store and slice	ui slice (theme) + store	configureStore, createSlice
Hooks and theme	ThemeToggle, Navbar	useSelector, useDispatch, Provider
Auth slice	Login form + auth state	User in localStorage, token in cookies
Login mutation	DummyJSON login	RTK Query mutation
Protected routes	/login, /jobs, /saved	TanStack Router beforeLoad
RTK Query jobs	JSONFakery jobs list	query, transformResponse
Applications	Save jobs + status	Client slice
Finish	Stats selectors	createSelector
Final Assessment	:	Submit Taskly (not HireBoard)

Reference structure for HireBoard:

hireboard/
├── index.html
├── vite.config.js
├── package.json
└── src/
    ├── main.jsx
    ├── App.jsx
    ├── style.css
    ├── routeTree.gen.ts
    ├── utils/
    │   └── cookies.js
    ├── store/
    │   ├── index.js
    │   ├── uiSlice.js
    │   ├── authSlice.js
    │   └── applicationsSlice.js
    ├── apis/
    │   ├── loginApi.js
    │   └── jobsApi.js
    ├── components/
    │   ├── Navbar.jsx
    │   ├── ThemeToggle.jsx
    │   ├── LoginForm.jsx
    │   ├── JobsList.jsx
    │   ├── JobCard.jsx
    │   ├── SavedJobs.jsx
    │   └── StatsBar.jsx
    └── routes/
        ├── __root.jsx
        ├── index.jsx
        ├── login.jsx
        ├── _authenticated.jsx
        └── _authenticated/
            ├── jobs.jsx
            └── saved.jsx

Assessment project: Taskly

Taskly is a personal task manager. Same stack and RTK ideas as HireBoard, different screens and data:

HireBoard (taught)	Taskly (you build)
Jobs list	Todos from DummyJSON GET /todos
Saved applications	Pinned tasks + priority
/jobs, /saved	/tasks, /pinned
hireboard-* keys	taskly-* keys

Full requirements and the submit rubric are in the Final Assessment lesson. Each earlier lesson ends with a Taskly milestone so you build it step by step.

APIs (both projects)

DummyJSON · JSONFakery

Endpoint	HireBoard	Taskly
POST /auth/login	Login	Login (same)
GET /jobs (JSONFakery)	Job cards	:
GET /todos?limit=20 (DummyJSON)	:	Task list

Session storage split (HireBoard example)

Data	Where	Why
User profile	localStorage (hireboard-user)	Easy to read for UI
Access token	Cookie (hireboard-token)	Credential-style session
Theme	localStorage (hireboard-theme)	Non-secret preference

For Taskly, use the same split with taskly-user, taskly-token, and taskly-theme.