[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"navigation":3,"url-settings":86,"blog-\u002Fblog\u002Freact-typescript-state-management-easy-peasy":671,"blog-author-\u002Fblog\u002Freact-typescript-state-management-easy-peasy":1400,"i-material-symbols:arrow-back-rounded":1415},{"id":4,"extension":5,"footer":6,"header":73,"meta":83,"stem":84,"__hash__":85},"navigation\u002Fdata\u002Fshared\u002Fnavigation.yml","yml",{"brand":7,"columns":13,"legal":63},{"name":8,"tagline":9,"downloadCta":10},"Pieces","The memory layer for modern work.",{"label":11,"href":12},"All downloads","\u002Fdownloads",[14,26,39,51],{"title":15,"links":16},"Product",[17,20,23],{"label":18,"href":19},"Pieces Desktop","\u002F",{"label":21,"href":22},"Pieces Enterprise","\u002Fenterprise",{"label":24,"href":25},"Pieces MCP","\u002Fmcp",{"title":27,"links":28},"Resources",[29,33,36],{"label":30,"href":31,"external":32},"Documentation","url:docs.home",true,{"label":34,"href":35},"Blog","\u002Fblog",{"label":37,"href":38,"external":32},"GitHub","url:github.org",{"title":40,"links":41},"Community",[42,45,48],{"label":43,"href":44,"external":32},"Discord","url:social.discord",{"label":46,"href":47,"external":32},"X \u002F Twitter","url:social.x",{"label":49,"href":50,"external":32},"LinkedIn","url:social.linkedin",{"title":52,"links":53},"Company",[54,57,60],{"label":55,"href":56},"About","\u002Fabout",{"label":58,"href":59},"Updates","\u002Fupdates",{"label":61,"href":62},"Contact","\u002Fcontact",[64,67,70],{"label":65,"href":66},"Privacy Policy","\u002Flegal\u002Fprivacy",{"label":68,"href":69},"Refund Policy","\u002Flegal\u002Frefund",{"label":71,"href":72},"Terms of Service","\u002Flegal\u002Fterms",{"links":74,"signIn":75,"contact":78,"cta":80},[],{"label":76,"href":77},"Manage account","url:portal.home",{"label":79,"href":62},"Get in touch",{"label":81,"href":82},"Download","url:routes.downloads",{},"data\u002Fshared\u002Fnavigation","XlSALC7vYCXHcmcXnjJViwIZKsqnQWF4bn4o9RrcSBE",{"id":87,"extension":5,"links":88,"meta":668,"stem":669,"__hash__":670},"urlSettings\u002Fdata\u002Fshared\u002Furls.yml",[89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,192,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,296,300,303,307,311,314,318,322,326,330,334,338,342,346,350,354,358,362,366,370,374,378,382,386,390,394,398,402,406,410,414,418,422,426,430,434,438,442,446,450,454,458,461,465,469,473,477,481,485,488,491,494,497,501,505,508,512,516,520,524,528,532,536,540,544,548,552,556,559,563,567,571,575,579,582,585,588,592,595,599,603,607,611,614,618,622,625,628,631,635,639,643,646,649,652,656,660,664],{"key":90,"label":91,"href":92},"downloads.desktop","Desktop download page","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdownload",{"key":94,"label":95,"href":96},"downloads.macOS.dmgArm64","macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg-arm64\u002Fdownload",{"key":98,"label":99,"href":100},"downloads.macOS.dmgIntel","macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg\u002Fdownload",{"key":102,"label":103,"href":104},"downloads.macOS.pkg","macOS PKG","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg\u002Fdownload",{"key":106,"label":107,"href":108},"downloads.macOS.universal","Desktop macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fmacos-universal\u002Fdownload",{"key":110,"label":111,"href":112},"downloads.macOS.pkgArm64","Desktop macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd-arm64\u002Fdownload",{"key":114,"label":115,"href":116},"downloads.macOS.pkgIntel","Desktop macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd\u002Fdownload",{"key":118,"label":119,"href":120},"downloads.windows.appinstaller","Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fpieces_for_x.appinstaller",{"key":122,"label":123,"href":124},"downloads.windows.exe","Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-exe\u002Fdownload",{"key":126,"label":127,"href":128},"downloads.windows.msix","Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-msix\u002Fdownload",{"key":130,"label":131,"href":132},"downloads.windows.suiteManager","Windows Suite Manager","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_suite_windows\u002Fappinstaller\u002Fdownload",{"key":134,"label":135,"href":136},"downloads.linux.flatpakRepo","Linux Flatpak repository","https:\u002F\u002Fbuilds.pieces.app\u002Fpieces-flatpak-repo\u002Fpieces-flatpak.flatpakrepo",{"key":138,"label":139,"href":140},"downloads.linux.snapDesktop","Linux Snap Desktop","https:\u002F\u002Fsnapcraft.io\u002Fpieces-for-developers",{"key":142,"label":143,"href":144},"downloads.linux.snapPiecesOS","Linux Snap PiecesOS","https:\u002F\u002Fsnapcraft.io\u002Fpieces-os",{"key":146,"label":147,"href":148},"downloads.linux.snap","Desktop Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fsnap\u002Fdownload",{"key":150,"label":151,"href":152},"downloads.piecesOS.macOS.dmgArm64","PiecesOS macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg-arm64\u002Fdownload",{"key":154,"label":155,"href":156},"downloads.piecesOS.macOS.dmgIntel","PiecesOS macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg\u002Fdownload",{"key":158,"label":159,"href":160},"downloads.piecesOS.macOS.universal","PiecesOS macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fmacos-universal\u002Fdownload",{"key":162,"label":163,"href":164},"downloads.piecesOS.macOS.pkgArm64","PiecesOS macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only-arm64\u002Fdownload",{"key":166,"label":167,"href":168},"downloads.piecesOS.macOS.pkgIntel","PiecesOS macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only\u002Fdownload",{"key":170,"label":171,"href":172},"downloads.piecesOS.windows.appinstaller","PiecesOS Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fos_server.appinstaller",{"key":174,"label":175,"href":176},"downloads.piecesOS.windows.exe","PiecesOS Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-exe\u002Fdownload",{"key":178,"label":179,"href":180},"downloads.piecesOS.windows.msix","PiecesOS Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-msix\u002Fdownload",{"key":182,"label":183,"href":184},"downloads.piecesOS.linux.snap","PiecesOS Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fsnap\u002Fdownload",{"key":186,"label":187,"href":188},"downloads.combined.macOS.appleSilicon","Combined macOS installer Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-arm64\u002Fdownload",{"key":190,"label":191,"href":104},"downloads.combined.macOS.intel","Combined macOS installer Intel",{"key":193,"label":194,"href":195},"downloads.guides.macOS","macOS installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fmacos-installation-guide",{"key":197,"label":198,"href":199},"downloads.guides.windows","Windows installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fwindows-installation-guide",{"key":201,"label":202,"href":203},"downloads.guides.linux","Linux installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide",{"key":205,"label":206,"href":207},"downloads.guides.linuxFlatpak","Linux Flatpak installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide\u002Fflatpak",{"key":209,"label":210,"href":211},"downloads.guides.linuxSnap","Linux Snap installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide\u002Fsnap",{"key":213,"label":214,"href":215},"downloads.guides.piecesOS","PiecesOS manual installation","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fmanual-installation",{"key":217,"label":218,"href":219},"extensions.chrome","Chrome extension","https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fpieces-save-code-snippets\u002Figbgibhbfonhmjlechmeefimncpekepm",{"key":221,"label":222,"href":223},"extensions.firefox","Firefox add-on","https:\u002F\u002Faddons.mozilla.org\u002Fen-US\u002Ffirefox\u002Faddon\u002Fpieces-save-code-from-the-web\u002F",{"key":225,"label":226,"href":227},"extensions.edge","Edge add-on","https:\u002F\u002Fmicrosoftedge.microsoft.com\u002Faddons\u002Fdetail\u002Fpieces-save-code-snippet\u002Fhglfimcdgonaeeobjckfdabcldfidmim",{"key":229,"label":230,"href":231},"extensions.vscode","VS Code extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.pieces-vscode",{"key":233,"label":234,"href":235},"extensions.visualStudio","Visual Studio extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.PiecesVisualStudio",{"key":237,"label":238,"href":239},"extensions.jetbrains","JetBrains plugin","https:\u002F\u002Fplugins.jetbrains.com\u002Fplugin\u002F17328-pieces--save-search-share--reuse-code-snippets",{"key":241,"label":242,"href":243},"extensions.obsidian","Obsidian plugin","https:\u002F\u002Fobsidian.md\u002Fplugins?id=pieces-for-developers",{"key":245,"label":246,"href":247},"extensions.sublime","Sublime package","https:\u002F\u002Fpackagecontrol.io\u002Fpackages\u002FPieces",{"key":249,"label":250,"href":251},"extensions.neovim","Neovim plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neo_vim",{"key":253,"label":254,"href":255},"extensions.jupyterlab","JupyterLab plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fjupyterlab-pieces",{"key":257,"label":258,"href":259},"extensions.cli","Pieces CLI","https:\u002F\u002Fpypi.org\u002Fproject\u002Fpieces-cli\u002F",{"key":261,"label":262,"href":263},"docs.home","Documentation home","https:\u002F\u002Fdocs.pieces.app",{"key":265,"label":266,"href":267},"docs.getStarted","Get started docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces",{"key":269,"label":270,"href":271},"docs.api","API docs","https:\u002F\u002Fdocs.pieces.app\u002Fapi",{"key":273,"label":274,"href":275},"docs.desktop.overview","Desktop overview","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop",{"key":277,"label":278,"href":279},"docs.desktop.onboarding","Desktop onboarding","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fonboarding",{"key":281,"label":282,"href":283},"docs.desktop.timeline","Desktop timeline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Ftimeline",{"key":285,"label":286,"href":287},"docs.desktop.summaries","Desktop summaries docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fsingle-click-summaries",{"key":289,"label":290,"href":291},"docs.desktop.search","Desktop conversational search docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconversational-search",{"key":293,"label":294,"href":295},"docs.desktop.drive","Desktop drive docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdrive",{"key":297,"label":298,"href":299},"docs.desktop.account","Desktop account settings docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconfiguration\u002Faccount",{"key":301,"label":302,"href":92},"docs.desktop.download","Desktop download docs",{"key":304,"label":305,"href":306},"docs.piecesOS.overview","PiecesOS overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies",{"key":308,"label":309,"href":310},"docs.piecesOS.details","PiecesOS details docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os",{"key":312,"label":313,"href":215},"docs.piecesOS.install","PiecesOS install docs",{"key":315,"label":316,"href":317},"docs.piecesOS.quickMenu","PiecesOS quick menu docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fquick-menu",{"key":319,"label":320,"href":321},"docs.piecesOS.storage","On-device storage docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fon-device-storage",{"key":323,"label":324,"href":325},"docs.piecesOS.troubleshooting","PiecesOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Ftroubleshooting",{"key":327,"label":328,"href":329},"docs.mcp.overview","MCP overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp",{"key":331,"label":332,"href":333},"docs.mcp.cursor","MCP Cursor docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcursor",{"key":335,"label":336,"href":337},"docs.mcp.vscode","MCP VS Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fvs-code",{"key":339,"label":340,"href":341},"docs.mcp.claudeDesktop","MCP Claude Desktop docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-desktop",{"key":343,"label":344,"href":345},"docs.mcp.claudeCode","MCP Claude Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-code",{"key":347,"label":348,"href":349},"docs.mcp.claudeCowork","MCP Claude Cowork docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-cowork",{"key":351,"label":352,"href":353},"docs.mcp.githubCopilot","MCP GitHub Copilot docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgithub-copilot",{"key":355,"label":356,"href":357},"docs.mcp.goose","MCP Goose docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoose",{"key":359,"label":360,"href":361},"docs.mcp.windsurf","MCP Windsurf docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fwindsurf",{"key":363,"label":364,"href":365},"docs.mcp.zed","MCP Zed docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fzed",{"key":367,"label":368,"href":369},"docs.mcp.jetbrains","MCP JetBrains docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fjetbrains-ides",{"key":371,"label":372,"href":373},"docs.mcp.continueDev","MCP Continue docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcontinue-dev",{"key":375,"label":376,"href":377},"docs.mcp.cline","MCP Cline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcline",{"key":379,"label":380,"href":381},"docs.mcp.raycast","MCP Raycast docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fraycast",{"key":383,"label":384,"href":385},"docs.mcp.rovoDevCli","MCP Rovo Dev CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Frovo-dev-cli",{"key":387,"label":388,"href":389},"docs.mcp.openaiCodexCli","MCP OpenAI Codex CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenai-codex-cli",{"key":391,"label":392,"href":393},"docs.mcp.googleGeminiCli","MCP Google Gemini CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoogle-gemini-cli",{"key":395,"label":396,"href":397},"docs.mcp.amazonQ","MCP Amazon Q docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Famazon-q-developer",{"key":399,"label":400,"href":401},"docs.mcp.chatgptDev","MCP ChatGPT Developer Mode docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fchatgpt-developer-mode",{"key":403,"label":404,"href":405},"docs.mcp.openclaw","MCP OpenClaw docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenclaw",{"key":407,"label":408,"href":409},"docs.mcp.mcpRemote","MCP Remote docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fmcp-remote",{"key":411,"label":412,"href":413},"docs.mcp.ngrok","MCP ngrok docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fngrok-setup",{"key":415,"label":416,"href":417},"docs.troubleshooting.macOS","macOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fmacos",{"key":419,"label":420,"href":421},"docs.troubleshooting.windows","Windows troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fwindows",{"key":423,"label":424,"href":425},"docs.troubleshooting.linux","Linux troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Flinux",{"key":427,"label":428,"href":429},"docs.privacy","Privacy and security docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fprivacy-security-your-data",{"key":431,"label":432,"href":433},"docs.support","Support docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fsupport",{"key":435,"label":436,"href":437},"portal.home","Pieces portal","https:\u002F\u002Fportal.pieces.app",{"key":439,"label":440,"href":441},"site.home","Website home","https:\u002F\u002Fpieces.app",{"key":443,"label":444,"href":445},"site.about","About page","https:\u002F\u002Fpieces.app\u002Fabout",{"key":447,"label":448,"href":449},"site.features","Features page","https:\u002F\u002Fpieces.app\u002Ffeatures",{"key":451,"label":452,"href":453},"site.plugins","Plugins page","https:\u002F\u002Fpieces.app\u002Fplugins",{"key":455,"label":456,"href":457},"site.contact","Contact page","https:\u002F\u002Fpieces.app\u002Fcontact",{"key":459,"label":58,"href":460},"site.updates","https:\u002F\u002Fpieces.app\u002Fupdates",{"key":462,"label":463,"href":464},"site.news","News","https:\u002F\u002Fpieces.app\u002Fnews",{"key":466,"label":467,"href":468},"site.events","Community events","https:\u002F\u002Fpieces.app\u002Fcommunity\u002Fevents",{"key":470,"label":471,"href":472},"site.userStories","User stories","https:\u002F\u002Fpieces.app\u002Fuser-stories",{"key":474,"label":475,"href":476},"site.academy","Academy","https:\u002F\u002Fpieces.app\u002Flearn\u002Facademy",{"key":478,"label":479,"href":480},"site.support","Website support","https:\u002F\u002Fpieces.app\u002Fsupport",{"key":482,"label":483,"href":484},"site.standup","Standup","https:\u002F\u002Fpieces.app\u002Fstandup",{"key":486,"label":34,"href":487},"site.blog","https:\u002F\u002Fcode.pieces.app\u002Fblog",{"key":489,"label":43,"href":490},"social.discord","https:\u002F\u002Fdiscord.gg\u002Fgetpieces",{"key":492,"label":46,"href":493},"social.x","https:\u002F\u002Fx.com\u002Fgetpieces",{"key":495,"label":496,"href":493},"social.twitter","Twitter",{"key":498,"label":499,"href":500},"social.instagram","Instagram","https:\u002F\u002Fwww.instagram.com\u002Fgetpieces\u002F",{"key":502,"label":503,"href":504},"social.tiktok","TikTok","https:\u002F\u002Fwww.tiktok.com\u002F@getpieces",{"key":506,"label":49,"href":507},"social.linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fgetpieces\u002F",{"key":509,"label":510,"href":511},"social.youtube","YouTube","https:\u002F\u002Fyoutube.com\u002F@getpieces",{"key":513,"label":514,"href":515},"github.org","GitHub organization","https:\u002F\u002Fgithub.com\u002Fpieces-app",{"key":517,"label":518,"href":519},"github.support","GitHub support","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport",{"key":521,"label":522,"href":523},"github.issues","GitHub issues","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fissues",{"key":525,"label":526,"href":527},"github.discussions","GitHub discussions","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fdiscussions",{"key":529,"label":530,"href":531},"github.documentation","GitHub documentation","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fdocumentation",{"key":533,"label":534,"href":535},"github.opensource","GitHub open source","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fopensource",{"key":537,"label":538,"href":539},"github.sdks.python","Python SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-python",{"key":541,"label":542,"href":543},"github.sdks.typescript","TypeScript SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-typescript",{"key":545,"label":546,"href":547},"github.sdks.dart","Dart SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-dart",{"key":549,"label":550,"href":551},"github.sdks.kotlin","Kotlin SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-kotlin",{"key":553,"label":554,"href":555},"github.plugins.obsidian","Obsidian plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fobsidian-pieces",{"key":557,"label":558,"href":255},"github.plugins.jupyterlab","JupyterLab plugin repository",{"key":560,"label":561,"href":562},"github.plugins.sublime","Sublime plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_sublime",{"key":564,"label":565,"href":566},"github.plugins.neovim","Neovim plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neovim",{"key":568,"label":569,"href":570},"github.cliAgent","CLI agent repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fcli-agent",{"key":572,"label":573,"href":574},"github.mcpDart","MCP Dart repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fmcp_dart",{"key":576,"label":577,"href":578},"github.awesomePieces","Awesome Pieces repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fawesome-pieces",{"key":580,"label":581,"href":66},"legal.privacyPolicy","Privacy policy",{"key":583,"label":584,"href":69},"legal.refundPolicy","Refund policy",{"key":586,"label":587,"href":72},"legal.terms","Terms",{"key":589,"label":590,"href":591},"legal.security","Legal security","https:\u002F\u002Fpieces.app\u002Flegal\u002Fsecurity",{"key":593,"label":594,"href":511},"videos.youtubeChannel","YouTube channel",{"key":596,"label":597,"href":598},"videos.gettingStartedDesktop","Getting started desktop video","https:\u002F\u002Fyoutu.be\u002FdUr1lRM_TYk",{"key":600,"label":601,"href":602},"videos.snippetDiscoveryxR","Snippet discovery video","https:\u002F\u002Fyoutu.be\u002FG6vb1USw-30",{"key":604,"label":605,"href":606},"sales.bookACall","Book a sales call","https:\u002F\u002Fcalendar.app.google\u002FWVUDtUfNy5Vst3sH7",{"key":608,"label":609,"href":610},"sales.enterprise","Enterprise form","https:\u002F\u002Fgetpieces.typeform.com\u002Fto\u002FaVQFTvpE",{"key":612,"label":613,"href":527},"sales.feedback","Feedback discussions",{"key":615,"label":616,"href":617},"sales.earlyAccess","Early access form","https:\u002F\u002Fgetpieces.typeform.com\u002Fearlyaccess",{"key":619,"label":620,"href":621},"sales.supportEmail","Support email","mailto:support@pieces.app",{"key":623,"label":624,"href":19},"routes.home","Home route",{"key":626,"label":627,"href":56},"routes.about","About route",{"key":629,"label":630,"href":12},"routes.downloads","Downloads route",{"key":632,"label":633,"href":634},"routes.thanks","Post-install thanks route","\u002Finstall\u002Fthanks",{"key":636,"label":637,"href":638},"routes.pricing","Pricing route","\u002Fpricing",{"key":640,"label":641,"href":642},"cta.freeTrial","Start free trial CTA (Pieces Pro) — used by \u002Fcampaigns\u002F* landing pages","https:\u002F\u002Fcampaigns.pieces.app\u002F",{"key":644,"label":645,"href":22},"routes.enterprise","Enterprise route",{"key":647,"label":648,"href":62},"routes.contact","Contact route",{"key":650,"label":651,"href":59},"routes.updates","Updates route",{"key":653,"label":654,"href":655},"routes.migrationError","Migration error route","\u002Fmigration\u002Ferror",{"key":657,"label":658,"href":659},"routes.authenticated","Post-login authenticated route","\u002Fauth\u002Fsigned-in",{"key":661,"label":662,"href":663},"routes.signed-out","Signed out route","\u002Fauth\u002Fsigned-out",{"key":665,"label":666,"href":667},"routes.authentication-error","Authentication error route","\u002Fauth\u002Ferror",{},"data\u002Fshared\u002Furls","2AvfSWI6bZACH5Kr1ZS3txMLjteRjCjbDR_ul1uRZ9Q",{"id":672,"title":673,"author":674,"authorPhoto":675,"authorPhotoAlt":676,"authorSlug":677,"body":678,"buttonText":1387,"buttonUrl":1387,"category":1388,"date":1389,"description":1390,"draft":1391,"editorsPick":1391,"extension":1392,"featured":1391,"image":1393,"imageAlt":1394,"meta":1395,"navigation":32,"ogImage":1387,"ogImageAlt":1387,"path":1396,"seo":1397,"stem":1398,"tags":1387,"__hash__":1399},"blog\u002Fblog\u002Freact-typescript-state-management-easy-peasy.md","Typescript-React State Management With Easy Peasy","Melvin Kosisochukwu","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Freact-typescript-state-management-easy-peasy\u002Fauthor.jpeg","Melvin Kosisochukwu.","melvin-kosisochukwu",{"type":679,"value":680,"toc":1366},"minimark",[681,685,690,701,706,727,735,739,742,753,757,760,764,767,774,781,796,800,803,809,815,822,825,831,837,840,850,854,863,869,875,886,890,893,922,931,938,944,950,960,966,972,975,979,982,988,994,997,1003,1009,1013,1020,1026,1029,1035,1041,1064,1067,1073,1079,1082,1113,1123,1126,1131,1137,1156,1160,1163,1183,1188,1194,1211,1215,1218,1224,1229,1235,1252,1255,1261,1264,1269,1275,1281,1287,1297,1301,1307,1313,1319,1323,1332,1338,1344,1348],[682,683,684],"p",{},"React state management is often tedious, what with boilerplate setup and complicated configurations. However, you can streamline state management with the Easy Peasy dependency.",[686,687,689],"h2",{"id":688},"what-is-easypeasy","What is Easy Peasy?",[682,691,692,693,700],{},"The Easy Peasy library handles state management in applications. It’s an abstraction of ",[694,695,699],"a",{"href":696,"rel":697},"https:\u002F\u002Fredux.js.org\u002F",[698],"nofollow","Redux",", which means that it is built on Redux but focuses on the crucial APIs that a developer requires. Easy Peasy state management, as the name suggests, allows you to easily set up state management for your application with zero configuration while providing the architectural leverage that Redux offers.",[702,703,705],"h3",{"id":704},"pros-of-using-easy-peasy-for-react-state-management","Pros of Using Easy Peasy for React State Management",[707,708,709,713,716,724],"ul",{},[710,711,712],"li",{},"It requires zero configuration and has a boilerplate to set up the state.",[710,714,715],{},"It provides all of Redux’s features, including state persistence and Redux middleware support.",[710,717,718,719,723],{},"Easy Peasy provides support for global, context, or local stores: The global store is accessible everywhere in your application, while a context store is accessible to a selected component. The local stores are for specific components, and can replace ",[720,721,722],"code",{},"useState",".",[710,725,726],{},"Easy Peasy supports computed properties, allowing you to create a state from an operation performed on another state.",[682,728,729,730,723],{},"For more on Easy Peasy Redux, you can check its ",[694,731,734],{"href":732,"rel":733},"https:\u002F\u002Feasy-peasy.vercel.app\u002F",[698],"official website",[702,736,738],{"id":737},"cons-of-using-easy-peasy-for-react-state-management","Cons of Using Easy Peasy for React State Management",[682,740,741],{},"Easy Peasy has many advantages, but we should consider some tradeoffs of integrating the React state management library into your application.",[707,743,744,747,750],{},[710,745,746],{},"It is bound to Redux and the features that Redux has to offer.",[710,748,749],{},"It increases the bundle size of applications due to its additional dependencies.",[710,751,752],{},"You must know Redux in order to use it for React state management.",[686,754,756],{"id":755},"getting-started-with-easy-peasy","Getting Started with Easy Peasy",[682,758,759],{},"Let’s look at the parts of Easy Peasy you need to understand to use the library.",[702,761,763],{"id":762},"store","Store",[682,765,766],{},"The store holds all of the actions and states for the application. The Easy Peasy store's structure is on model\u002Fobject definition; they contain the states and all actions that act on the state.",[682,768,769],{},[770,771],"img",{"alt":772,"src":773},"A snippet of React code.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Freact-typescript-state-management-easy-peasy\u002Fimg-001.png",[682,775,776],{},[694,777,780],{"href":778,"rel":779},"https:\u002F\u002Framan.pieces.cloud\u002F?p=c3d34fbc8b",[698],"Save to Pieces",[682,782,783,784,787,788,790,791,723],{},"The code block above demonstrates how to create a store using the ",[720,785,786],{},"createStore"," method from Easy Peasy. The ",[720,789,786],{}," method accepts two parameters: the store model and an optional configuration for the store. You can find additional information on the Easy Peasy store and its properties ",[694,792,795],{"href":793,"rel":794},"https:\u002F\u002Feasy-peasy.vercel.app\u002Fdocs\u002Fapi\u002Fstore.html",[698],"here",[702,797,799],{"id":798},"actions","Actions",[682,801,802],{},"Actions are triggered to mutate the state in the store. Easy Peasy has an Action type that accepts two types as parameters; the model and the payload. The payload parameter for the Action type is optional.",[682,804,805],{},[770,806],{"alt":807,"src":808},"A code snippet that shows an Action.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Freact-typescript-state-management-easy-peasy\u002Fimg-002.png",[682,810,811],{},[694,812,780],{"href":813,"rel":814},"https:\u002F\u002Framan.pieces.cloud\u002F?p=87ed4881d4",[698],[682,816,817,818,821],{},"The code block above demonstrates the typing for actions with the updateName action; we pass the ",[720,819,820],{},"IModel"," interface as the first parameter and a payload with a type string.",[682,823,824],{},"Actions are defined using the \"action\" function, encapsulating a function with the model state and payload as arguments. For example, you can define actions in your model like so:",[682,826,827],{},[770,828],{"alt":829,"src":830},"A React code snippet.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Freact-typescript-state-management-easy-peasy\u002Fimg-003.png",[682,832,833],{},[694,834,780],{"href":835,"rel":836},"https:\u002F\u002Framan.pieces.cloud\u002F?p=124744a68d",[698],[682,838,839],{},"The action above accepts a string as a payload to update the name state on the model.",[682,841,842,849],{},[843,844,845],"em",{},[846,847,848],"strong",{},"NB","**:** You should not destructure the state in your actions, as this will prevent the state from being updated.",[702,851,853],{"id":852},"thunks","Thunks",[682,855,856,857,862],{},"Thunks are actions used to handle ",[694,858,861],{"href":859,"rel":860},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FSide_effect_(computer_science)",[698],"side effects",", e.g., HTTPS requests.",[682,864,865],{},[770,866],{"alt":867,"src":868},"A code snippet that demonstrates thunks.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Freact-typescript-state-management-easy-peasy\u002Fimg-004.png",[682,870,871],{},[694,872,780],{"href":873,"rel":874},"https:\u002F\u002Framan.pieces.cloud\u002F?p=845443bf5a",[698],[682,876,877,878,881,882,885],{},"In the code block above, we have a thunk \"",[720,879,880],{},"fetchUserName","\" that accepts model type as a first parameter and payload type as an optional second parameter. The ",[720,883,884],{},"thunk"," function allows us to use asynchronous requests and access the model actions.",[702,887,889],{"id":888},"hooks-and-typing-hooks","Hooks and Typing Hooks",[682,891,892],{},"Easy Peasy comes with a few custom hooks that help use its features or access the store:",[707,894,895,905,913],{},[710,896,897,900,901,904],{},[720,898,899],{},"useStoreState"," ",[846,902,903],{},"hook",": allows you to access the store states from your components",[710,906,907,900,910,912],{},[720,908,909],{},"useStoreAction",[846,911,903],{},": grants you access to the actions in the store",[710,914,915,918,921],{},[720,916,917],{},"useStore",[846,919,920],{},":"," enables you to access the store instance",[682,923,924,925,930],{},"You can check out the ",[694,926,929],{"href":927,"rel":928},"https:\u002F\u002Feasy-peasy.vercel.app\u002Fdocs\u002Fapi\u002Fuse-store-actions.html",[698],"documentation"," for additional information on the custom hooks and how to use them for React state management.",[682,932,933,934,937],{},"When using React-Typescript, you need to type the hooks to have the store model type. We can achieve this with the ",[720,935,936],{},"createTypedHooks"," function.",[682,939,940],{},[770,941],{"alt":942,"src":943},"A code snippet that demonstrates custom hooks.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Freact-typescript-state-management-easy-peasy\u002Fimg-005.png",[682,945,946],{},[694,947,780],{"href":948,"rel":949},"https:\u002F\u002Framan.pieces.cloud\u002F?p=48bf4097f8",[698],[682,951,952,953,955,956,959],{},"In the code block above, we call the ",[720,954,936],{}," function with the store model passed as type and assigned to the ",[720,957,958],{},"typedHooks"," variable. Then, we move on to export reassigned typed version of the hooks. Finally, we will go on to use the typed hooks in the application:",[682,961,962],{},[770,963],{"alt":964,"src":965},"A React custom hook.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Freact-typescript-state-management-easy-peasy\u002Fimg-006.png",[682,967,968],{},[694,969,780],{"href":970,"rel":971},"https:\u002F\u002Framan.pieces.cloud\u002F?p=1eaf4080bc",[698],[682,973,974],{},"In the following section, we will build a simple React to-do list application that uses Easy Peasy for React state management and persisting state. The application features include adding a new list item, editing existing list items, and deleting existing items. We will not use Easy Peasy thunks, as the application requires no side effects.",[686,976,978],{"id":977},"project-setup","Project Setup",[682,980,981],{},"First, we’ll create a new React-Typescript app using the create-react-app CLI tool.",[682,983,984],{},[770,985],{"alt":986,"src":987},"A code snippet to create a React application.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Freact-typescript-state-management-easy-peasy\u002Fimg-007.png",[682,989,990],{},[694,991,780],{"href":992,"rel":993},"https:\u002F\u002Framan.pieces.cloud\u002F?p=f7ef4a9c1e",[698],[682,995,996],{},"The command above creates a new React typescript application. Then, we’ll install the Easy Peasy dependency and Bootstrap to style the application.",[682,998,999],{},[770,1000],{"alt":1001,"src":1002},"The command to install Easy Peasy and Bootstrap.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Freact-typescript-state-management-easy-peasy\u002Fimg-008.png",[682,1004,1005],{},[694,1006,780],{"href":1007,"rel":1008},"https:\u002F\u002Framan.pieces.cloud\u002F?p=a0cc42a785",[698],[702,1010,1012],{"id":1011},"setting-up-the-store","Setting Up the Store",[682,1014,1015,1016,1019],{},"In the ",[720,1017,1018],{},"src"," folder, we will create a folder called store with this structure:",[682,1021,1022],{},[770,1023],{"alt":1024,"src":1025},"An example of the file structure.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Freact-typescript-state-management-easy-peasy\u002Fimg-009.png",[682,1027,1028],{},"Once we have the file structure for the store set in the interface file, we have the types for our model:",[682,1030,1031],{},[770,1032],{"alt":1033,"src":1034},"A code snippet with React code.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Freact-typescript-state-management-easy-peasy\u002Fimg-010.png",[682,1036,1037],{},[694,1038,780],{"href":1039,"rel":1040},"https:\u002F\u002Framan.pieces.cloud\u002F?p=b35442ac4f",[698],[682,1042,1043,1044,1047,1048,1051,1052,1055,1056,1059,1060,1063],{},"In the code block above, we have the ",[720,1045,1046],{},"ITodo"," interface as the model interface. This has an items state, a ",[720,1049,1050],{},"setItem"," Action that accepts a string as its payload, a ",[720,1053,1054],{},"removeItem"," Action that accepts a string as its payload, and an ",[720,1057,1058],{},"updateItem"," Action that accepts the ",[720,1061,1062],{},"IItem"," type as its payload.",[682,1065,1066],{},"Next, we need to set up the model. In the model file, we will create the model object:",[682,1068,1069],{},[770,1070],{"alt":1071,"src":1072},"A code snippet to create the model object.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Freact-typescript-state-management-easy-peasy\u002Fimg-011.png",[682,1074,1075],{},[694,1076,780],{"href":1077,"rel":1078},"https:\u002F\u002Framan.pieces.cloud\u002F?p=eaaa499b51",[698],[682,1080,1081],{},"The code block above represents the model for our store. The model includes:",[707,1083,1084,1087,1097,1105],{},[710,1085,1086],{},"The items state with one default to-do item",[710,1088,1089,1090,1092,1093,1096],{},"A ",[720,1091,1050],{}," action that accepts a new item as an argument and creates an ",[720,1094,1095],{},"id"," for the new to-do item",[710,1098,1089,1099,1101,1102,1104],{},[720,1100,1054],{}," action that filters out the ",[720,1103,1095],{}," of the item passed in as an argument to the action",[710,1106,1089,1107,1109,1110,1112],{},[720,1108,1058],{}," action that accepts an object with ",[720,1111,1095],{}," and the new item value as its arguments.",[682,1114,1115,1116,1119,1120,1122],{},"In the previous section for React custom hooks, we covered how to type Easy Peasy hooks. We repeat this for the ",[720,1117,1118],{},"useStoreActions"," and ",[720,1121,899],{}," hooks in the hooks folder.",[682,1124,1125],{},"We’ll need to create the store for React state management. We handle this in the index.ts file:",[682,1127,1128],{},[770,1129],{"alt":1033,"src":1130},"https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Freact-typescript-state-management-easy-peasy\u002Fimg-012.png",[682,1132,1133],{},[694,1134,780],{"href":1135,"rel":1136},"https:\u002F\u002Framan.pieces.cloud\u002F?p=9dce408fb0",[698],[682,1138,1139,1140,1142,1143,1146,1147,1150,1151,1155],{},"In the code block above, we create a new store by calling the ",[720,1141,786],{}," function with the type ",[720,1144,1145],{},"StoreModel",". Then, we call the persist function with the model passed as a parameter; this will persist the store in ",[720,1148,1149],{},"sessionStorage",". Check the ",[694,1152,929],{"href":1153,"rel":1154},"https:\u002F\u002Feasy-peasy.vercel.app\u002Fdocs\u002Fapi\u002Fpersist.html",[698]," for more information on extensively using the persist function.",[702,1157,1159],{"id":1158},"integrating-easy-peasy-state-management","Integrating Easy Peasy State Management",[682,1161,1162],{},"To integrate the store into our app, we must wrap the application within the StoreProvider component from Easy Peasy.",[682,1164,1165,900,1171,900,1174,900,1177,900,1180],{},[843,1166,1167,1170],{},[846,1168,1169],{},"NB:"," If you are using React 18, you will need to cast the",[720,1172,1173],{},"StoreProvider",[843,1175,1176],{},"component; this will override the type error for children. You will also need to disable",[720,1178,1179],{},"React.StrictMode",[843,1181,1182],{},"in the index.tsx file.",[682,1184,1185],{},[770,1186],{"alt":1033,"src":1187},"https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Freact-typescript-state-management-easy-peasy\u002Fimg-013.png",[682,1189,1190],{},[694,1191,780],{"href":1192,"rel":1193},"https:\u002F\u002Framan.pieces.cloud\u002F?p=628b4bb2be",[698],[682,1195,1196,1197,1199,1200,1203,1204,1206,1207,1210],{},"We cast the type for the ",[720,1198,1173],{}," component from the code block and setting the prop type for children to ",[720,1201,1202],{},"React.ReactNode",". Then, in the app function, we wrap the application in the ",[720,1205,1173],{}," component with the store props accepting the store created as value. Finally, the ",[720,1208,1209],{},"useStoreRehydrated"," hook checks for the persisted data and rehydrates the state with the data found.",[702,1212,1214],{"id":1213},"using-easy-peasy-for-react-typescript-state-management","Using Easy Peasy for React Typescript State Management",[682,1216,1217],{},"We have completed the setup for Easy Peasy and integrated the store into the application, so it’s accessible from every component. The following action will use the state and actions from the store to get the application working.",[682,1219,1220,1221,1223],{},"To use the store state in the application component, we call the ",[720,1222,899],{}," hook.",[682,1225,1226],{},[770,1227],{"alt":1033,"src":1228},"https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Freact-typescript-state-management-easy-peasy\u002Fimg-014.png",[682,1230,1231],{},[694,1232,780],{"href":1233,"rel":1234},"https:\u002F\u002Framan.pieces.cloud\u002F?p=bcad48a685",[698],[682,1236,1237,1238,1240,1241,1244,1245,1248,1249,1251],{},"The code block demonstrates how the ",[720,1239,899],{}," hook accesses the items state from the Content component. The items variable maps through the ",[720,1242,1243],{},"TodoItem"," and passes the ",[720,1246,1247],{},"item"," value and the ",[720,1250,1095],{}," to the component props.",[682,1253,1254],{},"Items state:",[682,1256,1257],{},[770,1258],{"alt":1259,"src":1260},"The items' states.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Freact-typescript-state-management-easy-peasy\u002Fimg-015.png",[682,1262,1263],{},"Finally, we need to set up the actions for the application.",[1265,1266,1268],"h4",{"id":1267},"adding-new-item","Adding New Item",[682,1270,1271,1272,1274],{},"The ",[720,1273,1050],{}," action adds a new to-do item to the items array in the store; it accepts a string as a parameter.",[682,1276,1277],{},[770,1278],{"alt":1279,"src":1280},"A code snippet to add a new item to our list.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Freact-typescript-state-management-easy-peasy\u002Fimg-016.png",[682,1282,1283],{},[694,1284,780],{"href":1285,"rel":1286},"https:\u002F\u002Framan.pieces.cloud\u002F?p=7b334a9fef",[698],[682,1288,1289,1290,1292,1293,1296],{},"The code block above demonstrates how we can access actions from the store using the ",[720,1291,1118],{}," hook. We’ll call the ",[720,1294,1295],{},"addNewItem"," variable and then pass the parameter.",[1265,1298,1300],{"id":1299},"updating-existing-item","Updating Existing Item",[682,1302,1303,1304,1306],{},"This action will update an existing item with a new value. It’s achieved by calling the ",[720,1305,1058],{}," action and passing an object with the id of an existing item and the value of the new item.",[682,1308,1309],{},[770,1310],{"alt":1311,"src":1312},"A code snippet to update an item on our list.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Freact-typescript-state-management-easy-peasy\u002Fimg-017.png",[682,1314,1315],{},[694,1316,780],{"href":1317,"rel":1318},"https:\u002F\u002Framan.pieces.cloud\u002F?p=8909439615",[698],[1265,1320,1322],{"id":1321},"removing-existing-item","Removing Existing Item",[682,1324,1325,1326,1328,1329,1331],{},"Removing an item is achieved using the ",[720,1327,1054],{}," action from the store, which accepts the item's ",[720,1330,1095],{}," to remove from the items array.",[682,1333,1334],{},[770,1335],{"alt":1336,"src":1337},"A code snippet to remove an item from our list.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Freact-typescript-state-management-easy-peasy\u002Fimg-018.png",[682,1339,1340],{},[694,1341,780],{"href":1342,"rel":1343},"https:\u002F\u002Framan.pieces.cloud\u002F?p=563946a709",[698],[686,1345,1347],{"id":1346},"conclusion-and-project-resources","Conclusion and Project Resources",[682,1349,1350,1351,1356,1357,1360,1361,723],{},"This article covered what Easy Peasy is and how to set up Easy Peasy for your React-Typescript application. We also got to see how we can properly type Easy Peasy store when working with Typescript. You can check out the ",[694,1352,1355],{"href":1353,"rel":1354},"https:\u002F\u002Feasy-peasy.vercel.app\u002Fdocs\u002Fintroduction\u002F",[698],"official documentation"," for additional information on how you can use Easy Peasy for React state management. Also, you can test the live app for the project ",[694,1358,795],{"href":1353,"rel":1359},[698]," or browse the ",[694,1362,1365],{"href":1363,"rel":1364},"https:\u002F\u002Fgithub.com\u002FMelvinManni\u002Freact-easy-peasy",[698],"Github Repository",{"title":1367,"searchDepth":1368,"depth":1368,"links":1369},"",2,[1370,1375,1381,1386],{"id":688,"depth":1368,"text":689,"children":1371},[1372,1374],{"id":704,"depth":1373,"text":705},3,{"id":737,"depth":1373,"text":738},{"id":755,"depth":1368,"text":756,"children":1376},[1377,1378,1379,1380],{"id":762,"depth":1373,"text":763},{"id":798,"depth":1373,"text":799},{"id":852,"depth":1373,"text":853},{"id":888,"depth":1373,"text":889},{"id":977,"depth":1368,"text":978,"children":1382},[1383,1384,1385],{"id":1011,"depth":1373,"text":1012},{"id":1158,"depth":1373,"text":1159},{"id":1213,"depth":1373,"text":1214},{"id":1346,"depth":1368,"text":1347},null,"Software Development","2022-07-29T00:00:00.000Z","React state management in applications is often tedious. Skip the complicated configurations and boilerplates with the Easy Peasy dependency!",false,"md","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Freact-typescript-state-management-easy-peasy\u002Fhero.png","Open laptop with two IDE windows.",{},"\u002Fblog\u002Freact-typescript-state-management-easy-peasy",{"title":673,"description":1390},"blog\u002Freact-typescript-state-management-easy-peasy","BD3VTS1rgO99n9uAfcqr5Kcw4k2ePwm9jAoTM10IuD0",{"id":1401,"title":674,"body":1402,"description":1406,"draft":1391,"extension":1392,"meta":1409,"navigation":32,"path":1410,"photo":1411,"photoAlt":1387,"seo":1412,"stem":1413,"__hash__":1414},"authors\u002Fauthors\u002Fmelvin-kosisochukwu.md",{"type":679,"value":1403,"toc":1407},[1404],[682,1405,1406],{},"Melvin is a JavaScript Engineer, technical writer, blockchain enthusiast, and gamer. A JavaScript lover and an individual who wants to share knowledge.",{"title":1367,"searchDepth":1368,"depth":1368,"links":1408},[],{},"\u002Fauthors\u002Fmelvin-kosisochukwu","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fauthors\u002Fmelvin-kosisochukwu.jpg",{"title":674,"description":1406},"authors\u002Fmelvin-kosisochukwu","XyP4TmRG3-qr_lWfz9E2PFniwdKm6-F5bI_AHLoO1Ss",{"left":1416,"top":1416,"width":1417,"height":1417,"rotate":1416,"vFlip":1391,"hFlip":1391,"body":1418},0,24,"\u003Cpath fill=\"currentColor\" d=\"m7.825 13l4.9 4.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-6.6-6.6q-.15-.15-.213-.325T4.426 12t.063-.375t.212-.325l6.6-6.6q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L7.825 11H19q.425 0 .713.288T20 12t-.288.713T19 13z\"\u002F>"]