"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { code: "code", p: "p", pre: "pre", span: "span", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "useReducer is a state management method in React, just like useState. It provides a structure and set of rules that lead to fewer errors and easier code management. We use it to handle more complex state logic and to perform state changes in a more structured way compared to useState. As your application grows in size, managing everything solely with useState can become quite challenging. In projects with multiple developers, you might encounter the use of useReducer." }), "\n", _jsx(_components.p, { children: "The useReducer Hook takes two parameters: the reducer function and initial state values. The useReducer Hook returns an array of two elements: the first one is our state, and the second one is a dispatch function." }), "\n", _jsx(_components.p, { children: "When making changes to the state, we send an action object into the dispatch function we execute." }), "\n", _jsxs(_components.p, { children: ["If you haven't used the ", _jsx("a", { href: "/javascript-array-reduce", children: "JavaScript Array Reduce" }), " method before, you can look into ", _jsx("a", { href: "/javascript-array-reduce", children: "this article" }), " or do a quick search on Google."] }), "\n", _jsx(_components.p, { children: "If we want to update something, if we want to change this state value, we go with dispatch. We send an action object into Dispatch, and the action object necessarily takes a parameter called type, and we enter the change we want to make in the state into the type. Here we must provide the type property. We can also enter the data we want to save in the state in the payload section. Type is mandatory and payload is optional." }), "\n", _jsx(_components.p, { children: "Getting used to the terminology might take a bit of time, so there's no need to stress ourselves. We just need to stay relaxed." }), "\n", _jsx(_components.p, { children: "Let's examine a simple example of incrementing and decrementing a counter." }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsxs(_components.span, { className: "token imports", children: [_jsx(_components.span, { className: "token maybe-class-name", children: "React" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " useState ", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "\"react\"" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: _jsx(_components.span, { className: "token maybe-class-name", children: "Counter" }) }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "count", _jsx(_components.span, { className: "token punctuation", children: "," }), " setCount", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useState" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "Count" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "count", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "button onClick", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token function", children: "setCount" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "prevCount" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " prevCount ", _jsx(_components.span, { className: "token operator", children: "+" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token maybe-class-name", children: "Increment" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "button", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "button onClick", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token function", children: "setCount" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "prevCount" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " prevCount ", _jsx(_components.span, { className: "token operator", children: "-" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token maybe-class-name", children: "Decrement" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "button", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n", _jsx(_components.span, { className: "token keyword module", children: "export" }), " ", _jsx(_components.span, { className: "token keyword module", children: "default" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "Counter" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "Let's now implement the example using useReducer." }), "\n", _jsx(_components.p, { children: "The useReducer function returns a state and a dispatch function used to update the state using a state management pattern called the \"Reducer\" function. The Reducer function is a function that updates the state based on specific actions and facilitates these updates." }), "\n", _jsx(_components.p, { children: "For example, the usage of useReducer in a counter application is as follows:" }), "\n", _jsx(_components.p, { children: "Here's an example using useReducer:" }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsxs(_components.span, { className: "token imports", children: [_jsx(_components.span, { className: "token maybe-class-name", children: "React" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " useReducer ", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "\"react\"" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n", _jsx(_components.span, { className: "token keyword", children: "const" }), " initialState ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "count" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "reducer" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsxs(_components.span, { className: "token parameter", children: ["state", _jsx(_components.span, { className: "token punctuation", children: "," }), " action"] }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "action", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "type" }), " ", _jsx(_components.span, { className: "token operator", children: "===" }), " ", _jsx(_components.span, { className: "token string", children: "\"increment\"" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "count" }), _jsx(_components.span, { className: "token operator", children: ":" }), " state", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "count" }), " ", _jsx(_components.span, { className: "token operator", children: "+" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword control-flow", children: "else" }), " ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "action", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "type" }), " ", _jsx(_components.span, { className: "token operator", children: "===" }), " ", _jsx(_components.span, { className: "token string", children: "\"decrement\"" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "count" }), _jsx(_components.span, { className: "token operator", children: ":" }), " state", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "count" }), " ", _jsx(_components.span, { className: "token operator", children: "-" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword control-flow", children: "else" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token keyword control-flow", children: "throw" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "Error" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: _jsx(_components.span, { className: "token maybe-class-name", children: "Counter" }) }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "state", _jsx(_components.span, { className: "token punctuation", children: "," }), " dispatch", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useReducer" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "reducer", _jsx(_components.span, { className: "token punctuation", children: "," }), " initialState", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "Count" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "state", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "count" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "button onClick", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token function", children: "dispatch" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "type" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"increment\"" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Increment" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "button", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "button onClick", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token function", children: "dispatch" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "type" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"decrement\"" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Decrement" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "button", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n", _jsx(_components.span, { className: "token keyword module", children: "export" }), " ", _jsx(_components.span, { className: "token keyword module", children: "default" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "Counter" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "Shopping cart example" }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsxs(_components.span, { className: "token imports", children: [_jsx(_components.span, { className: "token maybe-class-name", children: "React" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " useReducer ", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "\"react\"" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n", _jsx(_components.span, { className: "token keyword", children: "const" }), " initialState ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "products" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "total" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "reducer" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsxs(_components.span, { className: "token parameter", children: ["state", _jsx(_components.span, { className: "token punctuation", children: "," }), " action"] }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "action", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "type" }), " ", _jsx(_components.span, { className: "token operator", children: "===" }), " ", _jsx(_components.span, { className: "token string", children: "\"addProduct\"" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token spread operator", children: "..." }), "state", _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "products" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token spread operator", children: "..." }), "state", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "products" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " action", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "payload" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "total" }), _jsx(_components.span, { className: "token operator", children: ":" }), " state", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "total" }), " ", _jsx(_components.span, { className: "token operator", children: "+" }), " action", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "payload" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "price" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "action", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "type" }), " ", _jsx(_components.span, { className: "token operator", children: "===" }), " ", _jsx(_components.span, { className: "token string", children: "\"removeProduct\"" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token keyword", children: "const" }), " updatedProducts ", _jsx(_components.span, { className: "token operator", children: "=" }), " state", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "products" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "filter" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "product" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " product", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "id" }), " ", _jsx(_components.span, { className: "token operator", children: "!==" }), " action", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "payload" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "id" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token keyword", children: "const" }), " updatedTotal ", _jsx(_components.span, { className: "token operator", children: "=" }), " updatedProducts", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "reduce" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsxs(_components.span, { className: "token parameter", children: ["acc", _jsx(_components.span, { className: "token punctuation", children: "," }), " product"] }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " acc ", _jsx(_components.span, { className: "token operator", children: "+" }), " product", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "price" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token spread operator", children: "..." }), "state", _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "products" }), _jsx(_components.span, { className: "token operator", children: ":" }), " updatedProducts", _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "total" }), _jsx(_components.span, { className: "token operator", children: ":" }), " updatedTotal", _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "action", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "type" }), " ", _jsx(_components.span, { className: "token operator", children: "===" }), " ", _jsx(_components.span, { className: "token string", children: "\"resetCart\"" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " initialState", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n ", _jsx(_components.span, { className: "token keyword control-flow", children: "throw" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "Error" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "\"Invalid action type.\"" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: _jsx(_components.span, { className: "token maybe-class-name", children: "ShoppingCart" }) }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "cart", _jsx(_components.span, { className: "token punctuation", children: "," }), " dispatch", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useReducer" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "reducer", _jsx(_components.span, { className: "token punctuation", children: "," }), " initialState", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n ", _jsx(_components.span, { className: "token keyword", children: "const" }), " products ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "id" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "name" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"Product 1\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "price" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "10" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "id" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "name" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"Product 2\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "price" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "20" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "id" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "3" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "name" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"Product 3\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "price" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "15" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "handleAddProduct" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "product" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token function", children: "dispatch" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "type" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"addProduct\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "payload" }), _jsx(_components.span, { className: "token operator", children: ":" }), " product ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "handleRemoveProduct" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "product" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token function", children: "dispatch" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "type" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"removeProduct\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "payload" }), _jsx(_components.span, { className: "token operator", children: ":" }), " product ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "handleResetCart" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token function", children: "dispatch" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "type" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"resetCart\"" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "h2", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Shopping" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "Cart" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "h2", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "ul", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "products", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "map" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "product" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "li key", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "product", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "id" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "product", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "name" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token operator", children: "-" }), " $", _jsx(_components.span, { className: "token punctuation", children: "{" }), "product", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "price" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "button onClick", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token function", children: "handleAddProduct" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "product", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token maybe-class-name", children: "Add" }), " to ", _jsx(_components.span, { className: "token maybe-class-name", children: "Cart" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "button", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "li", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "ul", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "h3", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Cart" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "h3", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "ul", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "cart", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "products" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "map" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "product" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "li key", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "product", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "id" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "product", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "name" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token operator", children: "-" }), " $", _jsx(_components.span, { className: "token punctuation", children: "{" }), "product", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "price" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "button onClick", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token function", children: "handleRemoveProduct" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "product", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token maybe-class-name", children: "Remove" }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "Cart" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "button", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "li", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "ul", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "p", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Total" }), _jsx(_components.span, { className: "token operator", children: ":" }), " $", _jsx(_components.span, { className: "token punctuation", children: "{" }), "cart", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "total" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "p", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "button onClick", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "handleResetCart", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Reset" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "Cart" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "button", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n", _jsx(_components.span, { className: "token keyword module", children: "export" }), " ", _jsx(_components.span, { className: "token keyword module", children: "default" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "ShoppingCart" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "Let's examine the example in detail." }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsxs(_components.span, { className: "token imports", children: [_jsx(_components.span, { className: "token maybe-class-name", children: "React" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " useReducer ", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "\"react\"" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "So in order to get started with useReducer, first we need to grab the hook" }), "\n", _jsx(_components.p, { children: "InitialState" }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " initialState ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "products" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "total" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "initialState defines the initial state of the shopping cart, which includes an empty list of products and a total of 0." }), "\n", _jsx(_components.p, { children: "Reducer" }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "reducer" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsxs(_components.span, { className: "token parameter", children: ["state", _jsx(_components.span, { className: "token punctuation", children: "," }), " action"] }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "action", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "type" }), " ", _jsx(_components.span, { className: "token operator", children: "===" }), " ", _jsx(_components.span, { className: "token string", children: "\"addProduct\"" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token spread operator", children: "..." }), "state", _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "products" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token spread operator", children: "..." }), "state", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "products" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " action", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "payload" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "total" }), _jsx(_components.span, { className: "token operator", children: ":" }), " state", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "total" }), " ", _jsx(_components.span, { className: "token operator", children: "+" }), " action", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "payload" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "price" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "action", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "type" }), " ", _jsx(_components.span, { className: "token operator", children: "===" }), " ", _jsx(_components.span, { className: "token string", children: "\"removeProduct\"" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token keyword", children: "const" }), " updatedProducts ", _jsx(_components.span, { className: "token operator", children: "=" }), " state", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "products" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "filter" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "product" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " product", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "id" }), " ", _jsx(_components.span, { className: "token operator", children: "!==" }), " action", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "payload" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "id" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token keyword", children: "const" }), " updatedTotal ", _jsx(_components.span, { className: "token operator", children: "=" }), " updatedProducts", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "reduce" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsxs(_components.span, { className: "token parameter", children: ["acc", _jsx(_components.span, { className: "token punctuation", children: "," }), " product"] }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " acc ", _jsx(_components.span, { className: "token operator", children: "+" }), " product", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "price" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token spread operator", children: "..." }), "state", _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "products" }), _jsx(_components.span, { className: "token operator", children: ":" }), " updatedProducts", _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "total" }), _jsx(_components.span, { className: "token operator", children: ":" }), " updatedTotal", _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "action", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "type" }), " ", _jsx(_components.span, { className: "token operator", children: "===" }), " ", _jsx(_components.span, { className: "token string", children: "\"resetCart\"" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " initialState", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n ", _jsx(_components.span, { className: "token keyword control-flow", children: "throw" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "Error" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "\"Invalid action type.\"" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "Reducer is a function that specifies how the state should be updated based on different actions. The actions supported are 'addProduct', 'removeProduct', and 'resetCart'." }), "\n", _jsx(_components.p, { children: "ShoppingCart Component:" }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: _jsx(_components.span, { className: "token maybe-class-name", children: "ShoppingCart" }) }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "cart", _jsx(_components.span, { className: "token punctuation", children: "," }), " dispatch", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useReducer" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "reducer", _jsx(_components.span, { className: "token punctuation", children: "," }), " initialState", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n ", _jsx(_components.span, { className: "token keyword", children: "const" }), " products ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "id" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "name" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"Product 1\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "price" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "10" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "id" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "name" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"Product 2\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "price" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "20" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "id" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "3" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "name" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"Product 3\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "price" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "15" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "handleAddProduct" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "product" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token function", children: "dispatch" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "type" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"addProduct\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "payload" }), _jsx(_components.span, { className: "token operator", children: ":" }), " product ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "handleRemoveProduct" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "product" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token function", children: "dispatch" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "type" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"removeProduct\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token literal-property property", children: "payload" }), _jsx(_components.span, { className: "token operator", children: ":" }), " product ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "handleResetCart" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token function", children: "dispatch" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "type" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"resetCart\"" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "h2", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Shopping" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "Cart" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "h2", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "ul", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "products", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "map" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "product" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "li key", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "product", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "id" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "product", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "name" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token operator", children: "-" }), " $", _jsx(_components.span, { className: "token punctuation", children: "{" }), "product", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "price" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "button onClick", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token function", children: "handleAddProduct" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "product", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token maybe-class-name", children: "Add" }), " to ", _jsx(_components.span, { className: "token maybe-class-name", children: "Cart" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "button", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "li", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "ul", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "h3", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Cart" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "h3", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "ul", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "cart", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "products" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "map" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "product" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "li key", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "product", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "id" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "product", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "name" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token operator", children: "-" }), " $", _jsx(_components.span, { className: "token punctuation", children: "{" }), "product", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "price" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "button onClick", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token function", children: "handleRemoveProduct" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "product", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token maybe-class-name", children: "Remove" }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "Cart" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "button", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "li", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "ul", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "p", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Total" }), _jsx(_components.span, { className: "token operator", children: ":" }), " $", _jsx(_components.span, { className: "token punctuation", children: "{" }), "cart", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "total" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "p", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "button onClick", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "handleResetCart", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Reset" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "Cart" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "button", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n", _jsx(_components.span, { className: "token keyword module", children: "export" }), " ", _jsx(_components.span, { className: "token keyword module", children: "default" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "ShoppingCart" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "ShoppingCart Component:" }), "\n", _jsx(_components.p, { children: "The ShoppingCart component renders a list of products with \"Add to Cart\" buttons.\nIt also displays the current contents of the cart (items added) and allows for removal of items.\nThe total price of the items in the cart is displayed.\nThere's a \"Reset Cart\" button to reset the cart to its initial state." }), "\n", _jsx(_components.p, { children: "Actions:" }), "\n", _jsx(_components.p, { children: "addProduct: Adds a product to the cart along with its price and updates the total.\nremoveProduct: Removes a product from the cart based on its id and updates the total.\nresetCart: Resets the cart to its initial state." }), "\n", _jsx(_components.p, { children: "Event Handlers:" }), "\n", _jsx(_components.p, { children: "handleAddProduct: Dispatches an action to add a product to the cart.\nhandleRemoveProduct: Dispatches an action to remove a product from the cart.\nhandleResetCart: Dispatches an action to reset the cart." }), "\n", _jsx(_components.p, { children: "The useReducer hook is used to manage the cart state and update it based on the actions dispatched. The ShoppingCart component renders the product list and cart, allowing users to add, remove, and reset the cart." })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };