Reducer architecture

Learn Reducer architecture in React with a dedicated explanation, a concept-specific example, a production caution, and a mastery check.

12 min read • Advanced

react-044.tsx

tsx

import { useReducer } from "react";
const initial={items:[]};function reducer(s,a){switch(a.type){case"add":return{...s,items:[...s.items,a.item]};case"clear":return initial;default:return s}}
export default function Cart(){const [s,d]=useReducer(reducer,initial);return <button onClick={()=>d({type:"clear"})}>{s.items.length}</button>}

What to watch

Content source & attribution

Original Syntaxis Content · Original Syntaxis Content

Lesson quizzes

Reducer architecture Mastery Check →

← PREVIOUS

Derived state avoidance

Component composition

Reducer architecture

Lesson quizzes

Notice