component---src-templates-blog-post-tsx-conte…chitecture-index-md-89695ddf16b3f69ea48c.js

js laniewski.me collected 2026-10-02 00:38:33 UTC 141,259 bytes, 2 lines download raw bytes

1"use strict";(self.webpackChunklaniewski_me=self.webpackChunklaniewski_me||[]).push([[593],{7793:function(s,e,n){n.r(e),n.d(e,{Head:function(){return w},default:function(){return g}});var a=n(7294),c=n(5893),t=n(1151);function l(s){const e=Object.assign({p:"p",ul:"ul",li:"li",a:"a",strong:"strong",h2:"h2",svg:"svg",path:"path",pre:"pre",code:"code",span:"span",h3:"h3",h4:"h4",blockquote:"blockquote",h5:"h5",ol:"ol"},(0,t.a)(),s.components),{Newsletter:n}=e;return n||function(s,e){throw new Error("Expected "+(e?"component":"object")+" `"+s+"` to be defined: you likely forgot to import, pass, or provide it.")}("Newsletter",!0),(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(e.p,{children:"Maintaining large React projects can be a difficult task. Below are a few practices Iâve adapted over the years working with React projects of all scales. A low of those practices were directly taken or inspired by excellent resources found in the React/Redux community, precisely:"}),"\n",(0,c.jsxs)(e.ul,{children:["\n",(0,c.jsxs)(e.li,{children:[(0,c.jsx)(e.a,{href:"https://react.dev/",rel:"nofollow noopener noreferrer",target:"_blank",children:"React: official documentation"}),";"]}),"\n",(0,c.jsxs)(e.li,{children:[(0,c.jsx)(e.a,{href:"https://redux.js.org/",rel:"nofollow noopener noreferrer",target:"_blank",children:"Redux: official documentation"}),";"]}),"\n",(0,c.jsxs)(e.li,{children:[(0,c.jsx)(e.a,{href:"https://github.com/erikras/ducks-modular-redux",rel:"nofollow noopener noreferrer",target:"_blank",children:"Ducks: Redux Reducer Bundles"}),";"]}),"\n",(0,c.jsxs)(e.li,{children:[(0,c.jsx)(e.a,{href:"https://github.com/alexnm/re-ducks",rel:"nofollow noopener noreferrer",target:"_blank",children:"Re-ducks: Building on the duck legacy"}),";"]}),"\n",(0,c.jsxs)(e.li,{children:[(0,c.jsx)(e.a,{href:"https://github.com/piotrwitek/react-redux-typescript-guide",rel:"nofollow noopener noreferrer",target:"_blank",children:"React & Redux TypeScript guide"}),";"]}),"\n"]}),"\n",(0,c.jsx)(e.p,{children:(0,c.jsx)(e.strong,{children:"The proposed architecture is not meant to be enforced dogmatically and is a work in progress that might change over time."})}),"\n",(0,c.jsxs)(e.h2,{id:"file-structure",children:["File structure",(0,c.jsx)(e.a,{className:"heading-link","aria-label":'Permalink to "File structure"',href:"#file-structure",children:(0,c.jsx)(e.svg,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16",width:"16",height:"16",fill:"currentColor","aria-hidden":"true",children:(0,c.jsx)(e.path,{d:"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"})})})]}),"\n",(0,c.jsxs)(e.p,{children:["Dan Abramov created a ",(0,c.jsx)(e.a,{href:"https://react-file-structure.surge.sh/",rel:"nofollow noopener noreferrer",target:"_blank",children:"guide"})," for organizing files and he made a very good point. For months Iâve been following the âgoodâ ways to organize React projects: starting at the separation of concerns with Presentational and Container components and finishing with adapting ",(0,c.jsx)(e.a,{href:"https://github.com/erikras/ducks-modular-redux",rel:"nofollow noopener noreferrer",target:"_blank",children:"ducks"}),"."]}),"\n",(0,c.jsx)(e.p,{children:"It worked well for small projects, but as they grew to be 30 different, unique screens and over 200 components, it became more difficult to maintain all of this together. At Milo, we came up with a directory structure that is inspired by Django and best practices from React, taking the separation of concerns to its extreme."}),"\n",(0,c.jsx)(e.pre,{children:(0,c.jsxs)(e.code,{className:"code-highlight",children:[(0,c.jsx)(e.span,{className:"code-line",children:"src/\n"}),(0,c.jsx)(e.span,{className:"code-line",children:"âââ App.tsx\n"}),(0,c.jsx)(e.span,{className:"code-line",children:"âââ index.ts\n"}),(0,c.jsx)(e.span,{className:"code-line",children:"âââ store.ts\n"}),(0,c.jsx)(e.span,{className:"code-line",children:"âââ types.ts\n"}),(0,c.jsx)(e.span,{className:"code-line",children:"âââ shared/\n"}),(0,c.jsx)(e.span,{className:"code-line",children:"â    âââ ComponentName.tsx\n"}),(0,c.jsx)(e.span,{className:"code-line",children:"âââ modules/\n"}),(0,c.jsx)(e.span,{className:"code-line",children:"â    âââ <moduleName>/\n"}),(0,c.jsx)(e.span,{className:"code-line",children:"â          âââ components/\n"}),(0,c.jsx)(e.span,{className:"code-line",children:"â          â     âââ ComponentName.tsx\n"}),(0,c.jsx)(e.span,{className:"code-line",children:"â          âââ actionCreators.ts\n"}),(0,c.jsx)(e.span,{className:"code-line",children:"â          âââ actionTypes.ts\n"}),(0,c.jsx)(e.span,{className:"code-line",children:"â          âââ apiCalls.ts\n"}),(0,c.jsx)(e.span,{className:"code-line",children:"â          âââ operations.ts\n"}),(0,c.jsx)(e.span,{className:"code-line",children:"â          âââ selectors.ts\n"}),(0,c.jsx)(e.span,{className:"code-line",children:"â          âââ reducers.ts\n"}),(0,c.jsx)(e.span,{className:"code-line",children:"â          âââ utils.ts\n"}),(0,c.jsx)(e.span,{className:"code-line",children:"â          âââ types.ts\n"}),(0,c.jsx)(e.span,{className:"code-line",children:"â          âââ index.ts\n"}),(0,c.jsx)(e.span,{className:"code-line",children:"âââ screens/\n"}),(0,c.jsx)(e.span,{className:"code-line",children:"      âââ <screenNamespace>/\n"}),(0,c.jsx)(e.span,{className:"code-line",children:"      â     âââ SubcreenNameA.tsx\n"}),(0,c.jsx)(e.span,{className:"code-line",children:"      â     âââ SubcreenNameB.tsx\n"}),(0,c.jsx)(e.span,{className:"code-line",children:"      âââ Navigation.ts\n"})]})}),"\n",(0,c.jsxs)(e.h3,{id:"shared",children:["Shared",(0,c.jsx)(e.a,{className:"heading-link","aria-label":'Permalink to "Shared"',href:"#shared",children:(0,c.jsx)(e.svg,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16",width:"16",height:"16",fill:"currentColor","aria-hidden":"true",children:(0,c.jsx)(e.path,{d:"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"})})})]}),"\n",(0,c.jsx)(e.p,{children:"This contains the shared code used all across your app. It c

1an include configuration files, primary presentational components (i.e. Buttons, Inputs, Grid, â¦) helpers to work with the API, and pretty much everything that doesnât fit in other parts of the proposed architecture."}),"\n",(0,c.jsxs)(e.h3,{id:"screens",children:["Screens",(0,c.jsx)(e.a,{className:"heading-link","aria-label":'Permalink to "Screens"',href:"#screens",children:(0,c.jsx)(e.svg,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16",width:"16",height:"16",fill:"currentColor","aria-hidden":"true",children:(0,c.jsx)(e.path,{d:"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"})})})]}),"\n",(0,c.jsxs)(e.p,{children:["Screens are components that are directly mounted on routes (",(0,c.jsx)(e.a,{href:"https://github.com/remix-run/react-router",rel:"nofollow noopener noreferrer",target:"_blank",children:(0,c.jsx)(e.code,{children:"react-router"})}),", ",(0,c.jsx)(e.a,{href:"https://github.com/react-navigation/react-navigation",rel:"nofollow noopener noreferrer",target:"_blank",children:(0,c.jsx)(e.code,{children:"react-navigation"})}),"). They render shared and/or module components."]}),"\n",(0,c.jsxs)(e.h3,{id:"modules",children:["Modules",(0,c.jsx)(e.a,{className:"heading-link","aria-label":'Permalink to "Modules"',href:"#modules",children:(0,c.jsx)(e.svg,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16",width:"16",height:"16",fill:"currentColor","aria-hidden":"true",children:(0,c.jsx)(e.path,{d:"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"})})})]}),"\n",(0,c.jsx)(e.p,{children:"Sometimes, we need to share the logic between web (React) and mobile (React Native) apps. The proposed structure makes it very easy to reuse and maintain the code without influencing other app parts."}),"\n",(0,c.jsxs)(e.p,{children:["The main idea of ",(0,c.jsx)(e.code,{children:"modules/"})," is to group a strongly coupled part of the application and make it as reusable as possible. It contains all the required components (later used in screens) as well as reducers, action creators, and other state-related utilities."]}),"\n",(0,c.jsxs)(e.ul,{children:["\n",(0,c.jsx)(e.li,{children:"A module must contain the entire logic for handling its concept;"}),"\n",(0,c.jsx)(e.li,{children:"A module may contain all the required components to present its concept."}),"\n"]}),"\n",(0,c.jsxs)(e.h4,{id:"components",children:["Components",(0,c.jsx)(e.a,{className:"heading-link","aria-label":'Permalink to "Components"',href:"#components",children:(0,c.jsx)(e.svg,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16",width:"16",height:"16",fill:"currentColor","aria-hidden":"true",children:(0,c.jsx)(e.path,{d:"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"})})})]}),"\n",(0,c.jsx)(e.p,{children:"We donât always follow the concept of a container and presentational components â the promoted thing with this concept is the separation of concerns which can be achieved in different, more maintainable ways, for example, through the Hooks API. Do what is more suitable for your case."}),"\n",(0,c.jsxs)(e.blockquote,{children:["\n",(0,c.jsxs)(e.p,{children:["âI donât suggest splitting your components like this anymore. If you find it natural in your codebase, this pattern can be handy. But Iâve seen it enforced without any necessity and with almost dogmatic fervor far too many times. The main reason I foun

1d it useful was because it let me separate complex stateful logic from other aspects of the component. Hooks let me do the same thing without an arbitrary division.â â ",(0,c.jsx)(e.a,{href:"https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0",rel:"nofollow noopener noreferrer",target:"_blank",children:"Dan Abramov"})]}),"\n"]}),"\n",(0,c.jsxs)(e.h4,{id:"index",children:["Index",(0,c.jsx)(e.a,{className:"heading-link","aria-label":'Permalink to "Index"',href:"#index",children:(0,c.jsx)(e.svg,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16",width:"16",height:"16",fill:"currentColor","aria-hidden":"true",children:(0,c.jsx)(e.path,{d:"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"})})})]}),"\n",(0,c.jsxs)(e.p,{children:["The ",(0,c.jsx)(e.code,{children:"index.ts"})," file should expose the public API of a module. Everything that is not exposed in this file should be considered private and never accessed from the outside."]}),"\n",(0,c.jsxs)(e.ul,{children:["\n",(0,c.jsx)(e.li,{children:"The default export must be the reducer."}),"\n",(0,c.jsxs)(e.li,{children:["It must export ",(0,c.jsx)(e.code,{children:"actions"}),", ",(0,c.jsx)(e.code,{children:"operations"}),", ",(0,c.jsx)(e.code,{children:"selectors"}),", and ",(0,c.jsx)(e.code,{children:"types"}),"."]}),"\n",(0,c.jsx)(e.li,{children:"It must expose all the components."}),"\n"]}),"\n",(0,c.jsx)(e.pre,{className:"language-typescript",children:(0,c.jsxs)(e.code,{className:"language-typescript code-highlight",children:[(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,c.jsx)(e.span,{className:"token operator",children:"*"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"as"})," actions ",(0,c.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,c.jsx)(e.span,{className:"token string",children:'"./actionCreators"'}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,c.jsx)(e.span,{className:"token operator",children:"*"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"as"})," operations ",(0,c.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,c.jsx)(e.span,{className:"token string",children:'"./operations"'}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,c.jsx)(e.span,{className:"token operator",children:"*"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"as"})," selectors ",(0,c.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,c.jsx)(e.span,{className:"token string",children:'"./selectors"'}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,c.jsx)(e.span,{className:"token operator",children:"*"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"as"})," types ",(0,c.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,c.jsx)(e.span,{className:"token string",children:'"./types"'}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"import"})," reducer ",(0,c.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,c.jsx)(e.span,{className:"token string",children:'"./reducers"'}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsx)(e.span,{className:"code-line",children:"\n"}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token comment",children:"// Store/state-related stuff:"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"export"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"default"})," reducer",(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"export"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"})," actions",(0,c.jsx)(e.span,{className:"token punctuation",children:","})," operations",(0,c.jsx)(e.span,{className:"token punctuation",children:","})," selectors",(0,c.jsx)(e.span,{className:"token punctuation",children:","}

1)," types ",(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsx)(e.span,{className:"code-line",children:"\n"}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token comment",children:"// Components:"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"export"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"default"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"as"})," ComponentNameA ",(0,c.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,c.jsx)(e.span,{className:"token string",children:'"./components/ComponentNameA"'}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"export"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"default"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"as"})," ComponentNameB ",(0,c.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,c.jsx)(e.span,{className:"token string",children:'"./components/ComponentNameB"'}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]})]})}),"\n",(0,c.jsxs)(e.h4,{id:"action-types",children:["Action Types",(0,c.jsx)(e.a,{className:"heading-link","aria-label":'Permalink to "Action Types"',href:"#action-types",children:(0,c.jsx)(e.svg,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16",width:"16",height:"16",fill:"currentColor","aria-hidden":"true",children:(0,c.jsx)(e.path,{d:"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"})})})]}),"\n",(0,c.jsx)(e.p,{children:"Action types are constants used by action creators and reducers. Each action type should be unique and prefixed by the project and module name."}),"\n",(0,c.jsx)(e.pre,{className:"language-typescript",children:(0,c.jsxs)(e.code,{className:"language-typescript code-highlight",children:[(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"export"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,c.jsx)(e.span,{className:"token constant",children:"POSTS_REQUEST"})," ",(0,c.jsx)(e.span,{className:"token operator",children:"="})," ",(0,c.jsx)(e.span,{className:"token string",children:'"@@<project_name>/<module_name>/POSTS_REQUEST"'}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"export"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,c.jsx)(e.span,{className:"token constant",children:"POSTS_PROCESS"})," ",(0,c.jsx)(e.span,{className:"token operator",children:"="})," ",(0,c.jsx)(e.span,{className:"token string",children:'"@@<project_name>/<module_name>/POSTS_PROCESS"'}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]})]})}),"\n",(0,c.jsx)(e.p,{children:"Your action types should be pure string literals. Dynamic string operations (like template strings, string concatenation, etc.) will widen literal type to its supertype string. This will break contextual typing in reducer cases when using TypeScript or Flow."}),"\n",(0,c.jsxs)(e.h4,{id:"action-creators",children:["Action Creators",(0,c.jsx)(e.a,{className:"heading-link","aria-label":'Permalink to "Action Creators"',href:"#action-creators",children:(0,c.jsx)(e.svg,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16",width:"16",height:"16",fill:"currentColor","aria-hidden":"true",children:(0,c.jsx)(e.path,{d:"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"})})})]}),"\n",(0,c.jsxs)(e.p,{children:["The action creators should follow the ",(0,c.jsx)(e.a,{href:"https://github.com/redux-utilities/flux-standard-action",rel:"nofollow noopener noreferrer",target:"_blank",children:"Flow Standard Action"})," specification when possible. Action shape should be predictable and known by the developers. Action creators should not contain any logic, nor transform the received payload â it makes them harder to test and the code is harder to debug."]}),"\n",(0,c.jsx)(e.pre,{className:"language-typescript",children:(0,c.jsxs)(e.code,{className:"language-typescript code-highlight",children:[(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"})," createStandardAction ",(0,c.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,c.jsx)(e.span,{className:"token string",children:'"typesafe-actions"'}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,c.jsx)(e.span,{className:"token operator",children:"*"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"as"})," Types ",(0,c.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,c.jsx)(e.span,{className:"token string",children:'"./actionTypes"'}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"})," Payload ",(0,c.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,c.jsx)(e.span,{className:"token string",children:'"./types"'}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsx)(e.span,{className:"code-line",children:"\n"}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"export"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"const"})," requestPosts ",(0,c.jsx)(e.span,{className:"token operator",children:"="}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["  ",(0,c.jsx)(e.span,{className:"token function",children:"createStandardAction"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),"Types",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token constant",children:"POSTS_REQUEST"}),(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),(0,c.jsx)(e.span,{className:"token operator",children:"<"}),(0,c.jsx)(e.span,{className:"token keyword",children:"void"}),(0,c.jsx)(e.span,{className:"token operator",children:">"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsx)(e.span,{className:"code-line",children:"\n"}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"export"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"const"})," processPosts ",(0,c.jsx)(e.span,{className:"token operator",children:"="}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["  ",(0,c.jsx)(e.span,{className:"token function",children:"createStandardAction"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),"Types",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token constant",children:"POSTS_REQUEST"}),(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),(0,c.jsx)(e.span,{className:"token operator",children:"<"}),"Payload ",(0,c.jsx)(e.span,{className:"token operator",children:"|"})," Error",(0,c.jsx)(e.span,{className:"token operator",children:">"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]})]})}),"\n",(0,c.jsxs)(e.p,{children:["You should not export any default value in ",(0,c.jsx)(e.code,{children:"actionCreators.ts"}),". Using named exports, it is easier to map dispatch to all actions exposed by a module using ",(0,c.jsx)(e.a,{href:"https://redux.js.org/api/bindactioncreators",rel:"nofollow noopener noreferrer",target:"_blank",children:(0,c.jsx)(e.code,{children:"bindActionCreators"})}),", as follows:"]}),"\n",(0,c.jsx)(e.pre,{className:"language-typescript",children:(0,c.jsxs)(e.code,{className:"language-typescript code-highlight",children:[(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"})," bindActionCreators ",(0,c.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,c.jsx)(e.span,{className:"token string",children:'"redux"'}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,c.jsx)(e.span,{className:"token operator",children:"*"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"as"})," Types ",(0,c.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,c.jsx)(e.span,{className:"token string",children:'"../../types"'}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"})," actions ",(0,c.jsx)(e.span,{className:"token keyword",children:"as"})," moduleActionsA ",(0,c.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,c.jsx)(e.span,{className:"token string",children:'"../moduleA"'}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"})," actions ",(0,c.jsx)(e.span,{className:"token keyword",children:"as"})," moduleActionsB ",(0,c.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,c.jsx)(e.span,{className:"token string",children:'"../moduleB"'}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsx)(e.span,{className:"code-line",children:"\n"}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,c.jsx)(e.span,{className:"token function-variable function",children:"mapDispatchToProps"})," ",(0,c.jsx)(e.span,{className:"token operator",children:"="})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),"dispatch",(0,c.jsx)(e.span,{className:"token operator",children:":"})," Dispatch",(0,c.jsx)(e.span,{className:"token operator",children:"<"}),"Types",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),"RootAction",(0,c.jsx)(e.span,{className:"token operator",children:">"}),(0,c.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,c.jsx)(e.span,{className:"token operator",children:"=>"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["  ",(0,c.jsx)(e.span,{className:"token function",children:"bindActionCreators"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),(0,c.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,c.jsx)(e.span,{className:"token operator",children:"..."}),"moduleActionsA",(0,c.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,c.jsx)(e.span,{className:"token operator",children:"..."}),"moduleActionsB ",(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,c.jsx)(e.span,{className:"token punctuation",children:","})," dispatch",(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]})]})}),"\n",(0,c.jsx)(n,{}),"\n",(0,c.jsxs)(e.h4,{id:"api-calls",children:["API Calls",(0,c.jsx)(e.a,{className:"heading-link","aria-label":'Permalink to "API Calls"',href:"#api-calls",children:(0,c.jsx)(e.svg,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16",width:"16",height:"16",fill:"currentColor","aria-hidden":"true",children:(0,c.jsx)(e.path,{d:"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"})})})]}),"\n",(0,c.jsxs)(e.p,{children:["API endpoints should not be hand-coded â it makes the code prone to errors and harder to maintain as API evolves. I encourage you to create a small configuration file with all available endpoints in ",(0,c.jsx)(e.code,{children:"config.ts"})," file, then reuse those endpoints in ",(0,c.jsx)(e.code,{children:"apiCalls.ts"}),"."]}),"\n",(0,c.jsxs)(e.h5,{id:"configuration",children:["Configuration",(0,c.jsx)(e.a,{className:"heading-link","aria-label":'Permalink to "Configuration"',href:"#configuration",children:(0,c.jsx)(e.svg,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16",width:"16",height:"16",fill:"currentColor","aria-hidden":"true",children:(0,c.jsx)(e.path,{d:"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"})})})]}),"\n",(0,c.jsx)(e.pre,{className:"language-typescript",children:(0,c.jsxs)(e.code,{className:"language-typescript code-highlight",children:[(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,c.jsx)(e.span,{className:"token constant",children:"URL"})," ",(0,c.jsx)(e.span,{className:"token operator",children:"="})," ",(0,c.jsx)(e.span,{className:"token string",children:'""'}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,c.jsx)(e.span,{className:"token constant",children:"API"})," ",(0,c.jsx)(e.span,{className:"token operator",children:"="})," ",(0,c.jsx)(e.span,{className:"token string",children:'""'}),(0,c.jsx)(e.span,{className

1:"token punctuation",children:";"}),"\n"]}),(0,c.jsx)(e.span,{className:"code-line",children:"\n"}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"export"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"default"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["  v1",(0,c.jsx)(e.span,{className:"token operator",children:":"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["    posts",(0,c.jsx)(e.span,{className:"token operator",children:":"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["      ",(0,c.jsx)(e.span,{className:"token function",children:"get"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),"id",(0,c.jsx)(e.span,{className:"token operator",children:":"})," ",(0,c.jsx)(e.span,{className:"token builtin",children:"number"}),(0,c.jsx)(e.span,{className:"token punctuation",children:","})," meta",(0,c.jsx)(e.span,{className:"token operator",children:"?"}),(0,c.jsx)(e.span,{className:"token operator",children:":"})," Object",(0,c.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["        ",(0,c.jsx)(e.span,{className:"token keyword",children:"return"})," ",(0,c.jsxs)(e.span,{className:"token template-string",children:[(0,c.jsx)(e.span,{className:"token template-punctuation string",children:"`"}),(0,c.jsxs)(e.span,{className:"token interpolation",children:[(0,c.jsx)(e.span,{className:"token interpolation-punctuation punctuation",children:"${"}),(0,c.jsx)(e.span,{className:"token constant",children:"URL"}),(0,c.jsx)(e.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,c.jsxs)(e.span,{className:"token interpolation",children:[(0,c.jsx)(e.span,{className:"token interpolation-punctuation punctuation",children:"${"}),(0,c.jsx)(e.span,{className:"token constant",children:"API"}),(0,c.jsx)(e.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,c.jsx)(e.span,{className:"token string",children:"v1/posts/"}),(0,c.jsxs)(e.span,{className:"token interpolation",children:[(0,c.jsx)(e.span,{className:"token interpolation-punctuation punctuation",children:"${"}),"id",(0,c.jsx)(e.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,c.jsxs)(e.span,{className:"token interpolation",children:[(0,c.jsx)(e.span,{className:"token interpolation-punctuation punctuation",children:"${"}),(0,c.jsx)(e.span,{className:"token function",children:"createQueryString"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),"meta",(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),(0,c.jsx)(e.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,c.jsx)(e.span,{className:"token template-punctuation string",children:"`"})]}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["      ",(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,c.jsx)(e.span,{className:"token punctuation",children:","}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["      ",(0,c.jsx)(e.span,{className:"token function",children:"list"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),"meta",(0,c.jsx)(e.span,{className:"token operator",children:"?"}),(0,c.jsx)(e.span,{className:"token operator",children:":"})," Object",(0,c.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["        ",(0,c.jsx)(e.span,{className:"token keyword",children:"return"})," ",(0,c.jsxs)(e.span,{className:"token template-string",children:[(0,c.jsx)(e.span,{className:"token template-punctuation string",children:"`"}),(0,c.jsxs)(e.span,{className:"token interpolation",children:[(0,c.jsx)(e.span,{className:"token interpolation-punctuation punctuation",children:"${"}),(0,c.jsx)(e.span,{className:"token constant",children:"URL"}),(0,c.jsx)(e.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,c.jsxs)(e.span,{className:"token interpolation",children:[(0,c.jsx)(e.span,{className:"token interpolation-punctuation punctuation",children:"${"}),(0,c.jsx)(e.span,{className:"token constant",children:"API"}),(0,c.jsx)(e.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,c.jsx)(e.span,{className:"token string",children:"v1/posts"}),(0,c.jsxs)(e.span,{className:"token interpolation",children:[(0,c.jsx)(e.span,{className:"token interpolation-punctuation punctuation",children:"${"}),(0,c.jsx)(e.span,{className:"token function",children:"createQueryString"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),"meta",(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),(0,c.jsx)(e.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,c.jsx)(e.span,{className:"token template-punctuation string",children:"`"})]}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["      ",(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["    ",(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["  ",(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,c.jsx)(e.span,{className:"token punctuation",children:","}),"\n"]}),(0,c.jsx)(e.span,{className:"code-line",children:"\n"}),(0,c.jsxs)(e.span,{className:"code-line",children:["  v2",(0,c.jsx)(e.span,{className:"token operator",children:":"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,c.jsx)(e.span,{className:"token comment",children:"/* ... */"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]})]})}),"\n",(0,c.jsxs)(e.h5,{id:"api-calls-1",children:["API Calls",(0,c.jsx)(e.a,{className:"heading-link","aria-label":'Permalink to "API Calls"',href:"#api-calls-1",children:(0,c.jsx)(e.svg,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16",width:"16",height:"16",fill:"currentColor","aria-hidden":"true",children:(0,c.jsx)(e.path,{d:"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"})})})]}),"\n",(0,c.jsx)(e.pre,{className:"language-typescript",children:(0,c.jsxs)(e.code,{className:"language-typescript code-highlight",children:[(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"export"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,c.jsx)(e.span,{className:"token function-variable function",children:"fetchPost"})," ",(0,c.jsx)(e.span,{className:"token operator",children:"="})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),"id",(0,c.jsx)(e.span,{className:"token operator",children:":"})," ",(0,c.jsx)(e.span,{className:"token builtin",children:"number"}),(0,c.jsx)(e.span,{className:"token punctuation",children:","})," meta",(0,c.jsx)(e.span,{className:"token operator",children:":"})," Object",(0,c.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,c.jsx)(e.span,{className:"token operator",children:"=>"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["  ",(0,c.jsx)(e.span,{className:"token function",children:"fetch"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),"urls",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),"v1",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),"posts",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token function",children:"get"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),"id",(0,c.jsx)(e.span,{className:"token punctuation",children:","})," meta",(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["    ",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token function",children:"then"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),"response ",(0,c.jsx)(e.span,{className:"token operator",children:"=>"})," response",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token function",children:"json"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsx)(e.span,{className:"code-line",children:"\n"}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"export"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,c.jsx)(e.span,{className:"token function-variable function",children:"fetchPosts"})," ",(0,c.jsx)(e.span,{className:"token operator",children:"="})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),"meta",(0,c.jsx)(e.span,{className:"token operator",children:":"})," Object",(0,c.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,c.jsx)(e.span,{className:"token operator",children:"=>"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["  ",(0,c.jsx)(e.span,{className:"token function",children:"fetch"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),"urls",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),"v1",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),"posts",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token function",children:"list"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),"meta",(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["    ",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token function",children:"then"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),"response ",(0,c.jsx)(e.span,{className:"token operator",children:"=>"})," response",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token function",children:"json"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]})]})}),"\n",(0,c.jsxs)(e.h4,{id:"operations",children:["Operations",(0,c.jsx)(e.a,{className:"heading-link","aria-label":'Permalink to "Operations"',href:"#operations",children:(0,c.jsx)(e.svg,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16",width:"16",height:"16",fill:"currentColor","aria-hidden":"true",children:(0,c.jsx)(e.path,{d:"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"})})})]}),"\n",(0,c.jsxs)(e.p,{children:["Operations can be ",(0,c.jsx)(e.a,{href:"https://github.com/reduxjs/redux-thunk",rel:"nofollow noopener noreferrer",target:"_blank",children:"thunks"})," or ",(0,c.jsx)(e.a,{href:"https://redux-saga.js.org/",rel:"nofollow noopener noreferrer",target:"_blank",children:"sagas"})," and everything else that delays the action dispatch. An operation is a function that can contain logic, dispatch multiple actions based on some predicates, and manipulate their payload."]}),"\n",(0,c.jsx)(e.pre,{className:"language-typescript",children:(0,c.jsxs)(e.code,{className:"language-typescript code-highlight",children:[(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,c.jsx)(e.span,{className:"token operator",children:"*"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"as"})," Types ",(0,c.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,c.jsx)(e.span,{className:"token string",children:'"../types"'}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,c.jsx)(e.span,{className:"token operator",children:"*"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"as"})," actions ",(0,c.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,c.jsx)(e.span,{className:"token string",children:'"./actionCreators"'}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,c.jsx)(e.span,{className:"token operator",children:"*"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"as"})," ",(0,c.jsx)(e.span,{className:"token constant",children:"API"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,c.jsx)(e.span,{className:"token string",children:'"./apiCalls"'}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsx)(e.span,{className:"code-line",children:"\n"}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"export"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,c.jsx)(e.span,{className:"token function-variable function",children:"doFooStuff"})," ",(0,c.jsx)(e.span,{className:"token operator",children:"="})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),"payload",(0,c.jsx)(e.span,{className:"token operator",children:":"})," Object",(0,c.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,c.jsx)(e.span,{className:"token operator",children:"=>"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["  ",(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),"dispatch",(0,c.jsx)(e.span,{className:"token operator",children:":"})," Dispatch",(0,c.jsx)(e.span,{className:"token operator",children:"<"}),"Types",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),"RootAction",(0,c.jsx)(e.span,{className:"token operator",children:">"}),(0,c.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,c.jsx)(e.span,{className:"token operator",children:"=>"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["    ",(0,c.jsx)(e.span,{className:"token function",children:"dispatch"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),"actions",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token function",children:"requestPosts"}),(0,c.jsx)(e.span,{className:"token punctuation",child

1ren:"("}),(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsx)(e.span,{className:"code-line",children:"\n"}),(0,c.jsxs)(e.span,{className:"code-line",children:["    ",(0,c.jsx)(e.span,{className:"token constant",children:"API"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token function",children:"fetchPosts"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),"payload",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),"meta",(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["      ",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token function",children:"then"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),"data ",(0,c.jsx)(e.span,{className:"token operator",children:"=>"})," ",(0,c.jsx)(e.span,{className:"token function",children:"dispatch"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),"actions",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token function",children:"processPosts"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),(0,c.jsx)(e.span,{className:"token function",children:"normalizePosts"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),"data",(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["      ",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token function",children:"catch"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),"err ",(0,c.jsx)(e.span,{className:"token operator",children:"=>"})," ",(0,c.jsx)(e.span,{className:"token function",children:"dispatch"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),"actions",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token function",children:"processPosts"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),"err",(0,c.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,c.jsx)(e.span,{className:"token boolean",children:"true"}),(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["  ",(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]})]})}),"\n",(0,c.jsxs)(e.h4,{id:"selectors",children:["Selectors",(0,c.jsx)(e.a,{className:"heading-link","aria-label":'Permalink to "Selectors"',href:"#selectors",children:(0,c.jsx)(e.svg,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16",width:"16",height:"16",fill:"currentColor","aria-hidden":"true",children:(0,c.jsx)(e.path,{d:"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"})})})]}),"\n",(0,c.jsxs)(e.p,{children:["Selectors can compute derived data, allowing Redux to store the minimal possible state. A selector is not recomputed unless one of its arguments changes. It minimized the amount of component re-renders to the minimum. Have a look at the excellent ",(0,c.jsx)(e.a,{href:"https://github.com/reduxjs/reselect",rel:"nofollow noopener noreferrer",target:"_blank",children:"reselect"})," package."]}),"\n",(0,c.jsx)(e.p,{children:"Consider the following example â it renders a list of posts created by the currently logged-in user:"}),"\n",(0,c.jsx)(e.pre,{className:"language-typescript",children:(0,c.jsxs)(e.code,{className:"language-typescript code-highlight",children:[(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"class"})," ",(0,c.jsx)(e.span,{className:"token class-name",children:"PostsList"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"extends"})," ",(0,c.jsx)(e.span,{className:"token class-name",children:"React"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),"PureComponent ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["  ",(0,c.jsx)(e.span,{className:"token function",children:"render"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),(0,c.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["    ",(0,c.jsx)(e.span,{className:"token keyword",children:"return"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["      ",(0,c.jsx)(e.span,{className:"token operator",children:"<"}),"ul",(0,c.jsx)(e.span,{className:"token operator",children:">"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["        ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["          ",(0,c.jsx)(e.span,{className:"token keyword",children:"this"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),"props",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),"posts\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["            ",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token function",children:"filter"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),"post ",(0,c.jsx)(e.span,{className:"token operator",children:"=>"})," post",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),"author ",(0,c.jsx)(e.span,{className:"token operator",children:"="})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"this"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),"props",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),"userId",(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["            ",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token function",children:"map"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),"post ",(0,c.jsx)(e.span,{className:"token operator",children:"=>"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["              ",(0,c.jsx)(e.span,{className:"token operator",children:"<"}),"div",(0,c.jsx)(e.span,{className:"token operator",children:">"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["                ",(0,c.jsx)(e.span,{className:"token operator",children:"<"}),"p",(0,c.jsx)(e.span,{className:"token operator",children:">"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),"post",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),"title",(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,c.jsx)(e.span,{className:"token operator",children:"<"}),(0,c.jsx)(e.span,{className:"token operator",children:"/"}),"p",(0,c.jsx)(e.span,{className:"token operator",children:">"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["                ",(0,c.jsx)(e.span,{className:"token operator",children:"<"}),"p",(0,c.jsx)(e.span,{className:"token operator",children:">"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),"post",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),"content",(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,c.jsx)(e.span,{className:"token operator",children:"<"}),(0,c.jsx)(e.span,{className:"token operator",children:"/"}),"p",(0,c.jsx)(e.span,{className:"token operator",children:">"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["              ",(0,c.jsx)(e.span,{className:"token operator",children:"<"}),(0,c.jsx)(e.span,{className:"token operator",children:"/"}),"div",(0,c.jsx)(e.span,{className:"token operator",children:">"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["            ",(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["        ",(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["      ",(0,c.jsx)(e.span,{className:"token operator",children:"<"}),(0,c.jsx)(e.span,{className:"token operator",children:"/"}),"ul",(0,c.jsx)(e.span,{className:"token operator",children:">"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["    ",(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["  ",(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),"\n"]}),(0,c.jsx)(e.span,{className:"code-line",children:"\n"}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,c.jsx)(e.span,{className:"token function-variable function",children:"mapStateToProps"})," ",(0,c.jsx)(e.span,{className:"token operator",children:"="})," state ",(0,c.jsx)(e.span,{className:"token operator",children:"=>"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["  posts",(0,c.jsx)(e.span,{className:"token operator",children:":"})," state",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),"posts",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),"data",(0,c.jsx)(e.span,{className:"token punctuation",children:","}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["  userId",(0,c.jsx)(e.span,{className:"token operator",children:":"})," state",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),"auth",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),"user",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),"id\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]})]})}),"\n",(0,c.jsx)(e.p,{children:"In the example above, a render is triggered every time the post collection changes, even if the changed post is not created by the user. Using selectors, we can avoid those unnecessary re-renders and update the component only if one of the userâs posts has been created or modified:"}),"\n",(0,c.jsx)(e.pre,{className:"language-typescript",children:(0,c.jsxs)(e.code,{className:"language-typescript code-highlight",children:[(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token comment",children:"// selectors.ts"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"})," createSelector ",(0,c.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,c.jsx)(e.span,{className:"token string",children:'"reselect"'}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsx)(e.span,{className:"code-line",children:"\n"}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,c.jsx)(e.span,{className:"token function-variable function",children:"postsSelector"})," ",(0,c.jsx)(e.span,{className:"token operator",children:"="})," state ",(0,c.jsx)(e.span,{className:"token operator",children:"=>"})," state",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),"posts",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),"data",(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,c.jsx)(e.span,{className:"token function-variable function",children:"userSelector"})," ",(0,c.jsx)(e.span,{className:"token operator",children:"="})," state ",(0,c.jsx)(e.span,{className:"token operator",children:"=>"})," state",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),"auth",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),"user",(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"const"})," userPostsSelector ",(0,c.jsx)(e.span,{className:"token operator",children:"="})," ",(0,c.jsx)(e.span,{className:"token function",children:"createSelector"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["  postsSelector",(0,c.jsx)(e.span,{className:"token punctuation",children:","}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["  userSelector",(0,c.jsx)(e.span,{className:"token punctuation",children:","}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["  ",(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),"posts",(0,c.jsx)(e.span,{className:"token punctuation",children:","})," user",(0,c.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,c.jsx)(e.span,{className:"token operator",children:"=>"})," posts",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token function",children:"filter"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),"post ",(0,c.jsx)(e.span,{className:"token operator",children:"=>"})," post",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),"author ",(0,c.jsx)(e.span,{className:"token operator",children:"==="})," user",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),"id",(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]})]})}),"\n",(0,c.jsx)(e.pre,{className:"language-typescript",children:(0,c.jsxs)(e.code,{className:"language-typescript code-highlight",children:[(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token comment",children:"// PostsList.tsx"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"class"})," ",(0,c.jsx)(e.span,{className:"token class-name",children:"PostsList"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"extends"})," ",(0,c.jsx)(e.span,{className:"token class-name",children:"React"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),"PureComponent ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["  ",(0,c.jsx)(e.span,{className:"token function",children:"render"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),(0,c.jsx)(e

1.span,{className:"token punctuation",children:")"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["    ",(0,c.jsx)(e.span,{className:"token keyword",children:"return"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["      ",(0,c.jsx)(e.span,{className:"token operator",children:"<"}),"ul",(0,c.jsx)(e.span,{className:"token operator",children:">"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["        ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,c.jsx)(e.span,{className:"token keyword",children:"this"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),"props",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),"userPosts",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token function",children:"map"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),"post ",(0,c.jsx)(e.span,{className:"token operator",children:"=>"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["          ",(0,c.jsx)(e.span,{className:"token operator",children:"<"}),"div",(0,c.jsx)(e.span,{className:"token operator",children:">"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["            ",(0,c.jsx)(e.span,{className:"token operator",children:"<"}),"p",(0,c.jsx)(e.span,{className:"token operator",children:">"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),"post",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),"title",(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,c.jsx)(e.span,{className:"token operator",children:"<"}),(0,c.jsx)(e.span,{className:"token operator",children:"/"}),"p",(0,c.jsx)(e.span,{className:"token operator",children:">"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["            ",(0,c.jsx)(e.span,{className:"token operator",children:"<"}),"p",(0,c.jsx)(e.span,{className:"token operator",children:">"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),"post",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),"content",(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,c.jsx)(e.span,{className:"token operator",children:"<"}),(0,c.jsx)(e.span,{className:"token operator",children:"/"}),"p",(0,c.jsx)(e.span,{className:"token operator",children:">"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["          ",(0,c.jsx)(e.span,{className:"token operator",children:"<"}),(0,c.jsx)(e.span,{className:"token operator",children:"/"}),"div",(0,c.jsx)(e.span,{className:"token operator",children:">"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["        ",(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["      ",(0,c.jsx)(e.span,{className:"token operator",children:"<"}),(0,c.jsx)(e.span,{className:"token operator",children:"/"}),"ul",(0,c.jsx)(e.span,{className:"token operator",children:">"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["    ",(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["  ",(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),"\n"]}),(0,c.jsx)(e.span,{className:"code-line",children:"\n"}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,c.jsx)(e.span,{className:"token function-variable function",children:"mapStateToProps"})," ",(0,c.jsx)(e.span,{className:"token operator",children:"="})," state ",(0,c.jsx)(e.span,{className:"token operator",children:"=>"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["  userPosts",(0,c.jsx)(e.span,{className:"token operator",children:":"})," ",(0,c.jsx)(e.span,{className:"token function",children:"userPostsSelector"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),"state",(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]})]})}),"\n",(0,c.jsx)(e.p,{children:"The other thing about selectors is that they facilitate the work with a part of the application that was developed by somebody else â you donât need to know the stateâs shape to work with it if the exposed selectors are enough and well-documented."}),"\n",(0,c.jsxs)(e.h4,{id:"reducers",children:["Reducers",(0,c.jsx)(e.a,{className:"heading-link","aria-label":'Permalink to "Reducers"',href:"#reducers",children:(0,c.jsx)(e.svg,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16",width:"16",height:"16",fill:"currentColor","aria-hidden":"true",children:(0,c.jsx)(e.path,{d:"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"})})})]}),"\n",(0,c.jsxs)(e.p,{children:["You should export one reducer per module, but a module can be composed of multiple reducers. Donât be afraid to break your reducer into multiple chunks to reduce complexity and make it easier to test. You can always combine them using ",(0,c.jsx)(e.a,{href:"https://redux.js.org/api/combinereducers",rel:"nofollow noopener noreferrer",target:"_blank",children:(0,c.jsx)(e.code,{children:"combineReducers"})}),"."]}),"\n",(0,c.jsx)(e.pre,{className:"language-typescript",children:(0,c.jsxs)(e.code,{className:"language-typescript code-highlight",children:[(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"})," combineReducers ",(0,c.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,c.jsx)(e.span,{className:"token string",children:'"redux"'}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"})," Action",(0,c.jsx)(e.span,{className:"token punctuation",children:","})," PostsState",(0,c.jsx)(e.span,{className:"token punctuation",children:","})," ErrorsState",(0,c.jsx)(e.span,{className:"token punctuation",children:","})," LoadingState ",(0,c.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,c.jsx)(e.span,{className:"token string",children:'"./types"'}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,c.jsx)(e.span,{className:"token operator",children:"*"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"as"})," Types ",(0,c.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,c.jsx)(e.span,{className:"token string",children:'"./actionTypes"'}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsx)(e.span,{className:"code-line",children:"\n"}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"export"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,c.jsx)(e.span,{className:"token function-variable function",children:"postsReducer"})," ",(0,c.jsx)(e.span,{className:"token operator",children:"="})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),"state",(0,c.jsx)(e.span,{className:"token operator",children:":"})," PostsState ",(0,c.jsx)(e.span,{className:"token operator",children:"="})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,c.jsx)(e.span,{className:"token punctuation",children:","})," action",(0,c.jsx)(e.span,{className:"token operator",children:":"})," Action",(0,c.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,c.jsx)(e.span,{className:"token operator",children:"=>"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["  ",(0,c.jsx)(e.span,{className:"token keyword",children:"switch"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),"action",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),"type",(0,c.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["    ",(0,c.jsx)(e.span,{className:"token keyword",children:"case"})," Types",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token constant",children:"POSTS_PROCESS"}),(0,c.jsx)(e.span,{className:"token operator",children:":"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["      ",(0,c.jsx)(e.span,{className:"token keyword",children:"if"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),(0,c.jsx)(e.span,{className:"token operator",children:"!"}),"action",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),"error",(0,c.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"return"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,c.jsx)(e.span,{className:"token operator",children:"..."}),"state",(0,c.jsx)(e.span,{className:"token punctuation",children:","})," action",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),"payload",(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsx)(e.span,{className:"code-line",children:"\n"}),(0,c.jsxs)(e.span,{className:"code-line",children:["    ",(0,c.jsx)(e.span,{className:"token keyword",children:"default"}),(0,c.jsx)(e.span,{className:"token operator",children:":"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["      ",(0,c.jsx)(e.span,{className:"token keyword",children:"return"})," state",(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["  ",(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),"\n"]}),(0,c.jsx)(e.span,{className:"code-line",children:"\n"}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"export"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,c.jsx)(e.span,{className:"token function-variable function",children:"errorsReducer"})," ",(0,c.jsx)(e.span,{className:"token operator",children:"="})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),"state",(0,c.jsx)(e.span,{className:"token operator",children:":"})," ErrorsState ",(0,c.jsx)(e.span,{className:"token operator",children:"="})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"null"}),(0,c.jsx)(e.span,{className:"token punctuation",children:","})," action",(0,c.jsx)(e.span,{className:"token operator",children:":"})," Action",(0,c.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,c.jsx)(e.span,{className:"token operator",children:"=>"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["  ",(0,c.jsx)(e.span,{className:"token keyword",children:"switch"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),"action",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),"type",(0,c.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["    ",(0,c.jsx)(e.span,{className:"token keyword",children:"case"})," Types",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token constant",children:"POSTS_PROCESS"}),(0,c.jsx)(e.span,{className:"token operator",children:":"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["      ",(0,c.jsx)(e.span,{className:"token keyword",children:"if"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),"action",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),"error",(0,c.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"return"})," action",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),"payload",(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsx)(e.span,{className:"code-line",children:"\n"}),(0,c.jsxs)(e.span,{className:"code-line",children:["    ",(0,c.jsx)(e.span,{className:"token keyword",children:"default"}),(0,c.jsx)(e.span,{className:"token operator",children:":"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["      ",(0,c.jsx)(e.span,{className:"token keyword",children:"return"})," state",(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["  ",(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),"\n"]}),(0,c.jsx)(e.span,{className:"code-line",children:"\n"}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"export"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,c.jsx)(e.span,{className:"token function-variable function",children:"loadingReducer"})," ",(0,c.jsx)(e.span,{className:"token operator",children:"="})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),"state",(0,c.jsx)(e.span,{className:"token operator",children:":"})," LoadingState ",(0,c.jsx)(e.span,{className:"token operator",children:"="})," ",(0,c.jsx)(e.span,{className:"token boolean",children:"false"}),(0,c.jsx)(e.span,{className:"token punctuation",children:","})," action",(0,c.jsx)(e.span,{className:"token operator",children:":"})," Action",(0,c.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,c.jsx)(e.span,{className:"token operator",children:"=>"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["  ",(0,c.jsx)(e.span,{className:"token keyword",children:"switch"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),"action",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),"type",(0,c.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["    ",(0,c.jsx)(e.span,{className:"token keyword",children:"case"})," Types",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token constant",children:"POSTS_REQUEST"}),(0,c.jsx)(e.span,{classNam

1e:"token operator",children:":"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["      ",(0,c.jsx)(e.span,{className:"token keyword",children:"return"})," ",(0,c.jsx)(e.span,{className:"token boolean",children:"true"}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["    ",(0,c.jsx)(e.span,{className:"token keyword",children:"case"})," Types",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token constant",children:"POSTS_PROCESS"}),(0,c.jsx)(e.span,{className:"token operator",children:":"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["      ",(0,c.jsx)(e.span,{className:"token keyword",children:"return"})," ",(0,c.jsx)(e.span,{className:"token boolean",children:"false"}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["    ",(0,c.jsx)(e.span,{className:"token keyword",children:"default"}),(0,c.jsx)(e.span,{className:"token operator",children:":"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["      ",(0,c.jsx)(e.span,{className:"token keyword",children:"return"})," state",(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["  ",(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),"\n"]}),(0,c.jsx)(e.span,{className:"code-line",children:"\n"}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"export"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"default"})," ",(0,c.jsx)(e.span,{className:"token function",children:"combineReducers"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["  data",(0,c.jsx)(e.span,{className:"token operator",children:":"})," postsReducer",(0,c.jsx)(e.span,{className:"token punctuation",children:","}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["  errors",(0,c.jsx)(e.span,{className:"token operator",children:":"})," errorsReducer",(0,c.jsx)(e.span,{className:"token punctuation",children:","}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["  loading",(0,c.jsx)(e.span,{className:"token operator",children:":"})," loadingReducer",(0,c.jsx)(e.span,{className:"token punctuation",children:","}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]})]})}),"\n",(0,c.jsxs)(e.h4,{id:"types",children:["Types",(0,c.jsx)(e.a,{className:"heading-link","aria-label":'Permalink to "Types"',href:"#types",children:(0,c.jsx)(e.svg,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16",width:"16",height:"16",fill:"currentColor","aria-hidden":"true",children:(0,c.jsx)(e.path,{d:"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"})})})]}),"\n",(0,c.jsxs)(e.p,{children:["If you use Flow or TypeScript, itâs a good idea to keep all the types in one place (",(0,c.jsx)(e.code,{children:"types.ts"}),"). By doing so, we can expose all of them at once to other modules of the app. This is particularly handy when we need to expose the root ",(0,c.jsx)(e.code,{children:"Action"})," and ",(0,c.jsx)(e.code,{children:"State"})," which is used in every selector and container. Hereâs an example of ",(0,c.jsx)(e.code,{children:"/types.ts"}),":"]}),"\n",(0,c.jsx)(e.pre,{className:"language-typescript",children:(0,c.jsxs)(e.code,{className:"language-typescript code-highlight",children:[(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"})," AnyAction ",(0,c.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,c.jsx)(e.span,{className:"token string",children:'"redux"'}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"})," StateType ",(0,c.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,c.jsx)(e.span,{className:"token string",children:'"typesafe-actions"'}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"import"})," rootReducer ",(0,c.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,c.jsx)(e.span,{className:"token string",children:'"./reducers"'}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"})," types ",(0,c.jsx)(e.span,{className:"token keyword",children:"as"})," FooTypes ",(0,c.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,c.jsx)(e.span,{className:"token string",children:'"../../modules/foo"'}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"})," types ",(0,c.jsx)(e.span,{className:"token keyword",children:"as"})," BarTypes ",(0,c.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,c.jsx)(e.span,{className:"token string",children:'"../../modules/bar"'}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsx)(e.span,{className:"code-line",children:"\n"}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"export"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"type"})," ",(0,c.jsx)(e.span,{className:"token class-name",children:"RootState"})," ",(0,c.jsx)(e.span,{className:"token operator",children:"="}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["  StateType",(0,c.jsx)(e.span,{className:"token operator",children:"<"}),(0,c.jsx)(e.span,{className:"token keyword",children:"typeof"})," rootReducer",(0,c.jsx)(e.span,{className:"token operator",children:">"}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsx)(e.span,{className:"code-line",children:"\n"}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"export"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"type"})," ",(0,c.jsx)(e.span,{className:"token class-name",children:"RootAction"})," ",(0,c.jsx)(e.span,{className:"token operator",children:"="}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["  FooTypes",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),"Action ",(0,c.jsx)(e.span,{className:"token operator",children:"|"})," BarTypes",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),"Action ",(0,c.jsx)(e.span,{className:"token operator",children:"|"})," AnyAction",(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]})]})}),"\n",(0,c.jsxs)(e.h3,{id:"utilities-for-state-management",children:["Utilities for state management",(0,c.jsx)(e.a,{className:"heading-link","aria-label":'Permalink to "Utilities for state management"',href:"#utilities-for-state-management",children:(0,c.jsx)(e.svg,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16",width:"16",height:"16",fill:"currentColor","aria-hidden":"true",children:(0,c.jsx)(e.path,{d:"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"})})})]}),"\n",(0,c.jsx)(e.p,{children:"You can think of Redux as a low-level API â it doesnât force any particular patterns and allows you pretty much to do whatever you want."}),"\n",(0,c.jsxs)(e.ul,{children:["\n",(0,c.jsxs)(e.li,{children:[(0,c.jsx)(e.a,{href:"https://ramdajs.com/",rel:"nofollow noopener noreferrer",target:"_blank",children:"Ramda"}),": a practical functional library for JavaScript programmers."]}),"\n",(0,c.jsxs)(e.li,{children:[(0,c.jsx)(e.a,{href:"https://github.com/immerjs/immer",rel:"nofollow noopener noreferrer",target:"_blank",children:"Immer"}),": create the next immutable state by mutating the current one."]}),"\n"]}),"\n",(0,c.jsxs)(e.h3,{id:"utilities-for-creating-styles",children:["Utilities for creating styles",(0,c.jsx)(e.a,{className:"heading-link","aria-label":'Permalink to "Utilities for creating styles"',href:"#utilities-for-creating-styles",children:(0,c.jsx)(e.svg,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16",width:"16",height:"16",fill:"currentColor","aria-hidden":"true",children:(0,c.jsx)(e.path,{d:"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"})})})]}),"\n",(0,c.jsxs)(e.p,{children:["Creating styles can be a pain, especially in React Native or when you need to create custom styles based on the state. ",(0,c.jsx)(e.a,{href:"https://styled-components.c

1om/ecosystem",rel:"nofollow noopener noreferrer",target:"_blank",children:"Styled Components"})," can come in handy â they allow you to create styles directly in JavaScript using SCSS syntax."]}),"\n",(0,c.jsxs)(e.h3,{id:"tips-and-tricks",children:["Tips and tricks",(0,c.jsx)(e.a,{className:"heading-link","aria-label":'Permalink to "Tips and tricks"',href:"#tips-and-tricks",children:(0,c.jsx)(e.svg,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16",width:"16",height:"16",fill:"currentColor","aria-hidden":"true",children:(0,c.jsx)(e.path,{d:"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"})})})]}),"\n",(0,c.jsxs)(e.h4,{id:"you-can-use-reducers-on-the-inner-state",children:["You can use reducers on the inner state",(0,c.jsx)(e.a,{className:"heading-link","aria-label":'Permalink to "You can use reducers on the inner state"',href:"#you-can-use-reducers-on-the-inner-state",children:(0,c.jsx)(e.svg,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16",width:"16",height:"16",fill:"currentColor","aria-hidden":"true",children:(0,c.jsx)(e.path,{d:"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"})})})]}),"\n",(0,c.jsx)(e.p,{children:"Creating reducers to handle the inner component state is a good practice in the case when you have complex state logic â it is easier to test and in most cases, less error-prone. Creating reducers for inner state management is even easier with the new Hooks API."}),"\n",(0,c.jsxs)(e.p,{children:[(0,c.jsx)(e.strong,{children:"Example:"})," from official React ",(0,c.jsxs)(e.a,{href:"https://react.dev/reference/react/useReducer",rel:"nofollow noopener noreferrer",target:"_blank",children:[(0,c.jsx)(e.code,{children:"useReducer"})," example"]}),":"]}),"\n",(0,c.jsx)(e.pre,{className:"language-jsx",children:(0,c.jsxs)(e.code,{className:"language-jsx code-highlight",children:[(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword module",children:"export"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"const"})," initialState ",(0,c.jsx)(e.span,{className:"token operator",children:"="})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,c.jsx)(e.span,{className:"token literal-property property",children:"count"}),(0,c.jsx)(e.span,{className:"token operator",children:":"})," ",(0,c.jsx)(e.span,{className:"token number",children:"0"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsx)(e.span,{className:"code-line",children:"\n"}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword module",children:"export"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"function"})," ",(0,c.jsx)(e.span,{className:"token function",children:"reducer"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),(0,c.jsxs)(e.span,{className:"token parameter",children:["state",(0,c.jsx)(e.span,{className:"token punctuation",children:","})," action"]}),(0,c.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["  ",(0,c.jsx)(e.span,{className:"token keyword control-flow",children:"switch"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),"action",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token property-access",children:"type"}),(0,c.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["    ",(0,c.jsx)(e.span,{className:"token keyword",children:"case"})," ",(0,c.jsx)(e.span,{className:"token string",children:'"increment"'}),(0,c.jsx)(e.span,{className:"token operator",children:":"})," ",(0,c.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,c.jsx)(e.span,{className:"token literal-property property",children:"count"}),(0,c.jsx)(e.span,{className:"token operator",children:":"})," state",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token property-access",children:"count"})," ",(0,c.jsx)(e.span,{className:"token operator",children:"+"})," ",(0,c.jsx)(e.span,{className:"token number",children:"1"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["    ",(0,c.jsx)(e.span,{className:"token keyword",children:"case"})," ",(0,c.jsx)(e.span,{className:"token string",children:'"decrement"'}),(0,c.jsx)(e.span,{className:"token operator",children:":"})," ",(0,c.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,c.jsx)(e.span,{className:"token literal-property property",children:"count"}),(0,c.jsx)(e.span,{className:"token operator",children:":"})," state",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token property-access",children:"count"})," ",(0,c.jsx)(e.span,{className:"token operator",children:"-"})," ",(0,c.jsx)(e.span,{className:"token number",children:"1"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["    ",(0,c.jsx)(e.span,{className:"token keyword module",children:"default"}),(0,c.jsx)(e.span,{className:"token operator",children:":"})," ",(0,c.jsx)(e.span,{className:"token keyword control-flow",children:"throw"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"new"})," ",(0,c.jsx)(e.span,{className:"token class-name",children:"Error"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["  ",(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),"\n"]}),(0,c.jsx)(e.span,{className:"code-line",children:"\n"}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword module",children:"export"})," ",(0,c.jsx)(e.span,{className:"token keyword module",children:"default"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"function"})," ",(0,c.jsx)(e.span,{className:"token function",children:(0,c.jsx)(e.span,{className:"token maybe-class-name",children:"Counter"})}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),(0,c.jsxs)(e.span,{className:"token parameter",children:[(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),"initialState",(0,c.jsx)(e.span,{className:"token punctuation",children:"}"})]}),(0,c.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["  ",(0,c.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"["}),"state",(0,c.jsx)(e.span,{className:"token punctuation",children:","})," dispatch",(0,c.jsx)(e.span,{className:"token punctuation",children:"]"})," ",(0,c.jsx)(e.span,{className:"token operator",children:"="})," ",(0,c.jsx)(e.span,{className:"token function",children:"useReducer"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),"reducer",(0,c.jsx)(e.span,{className:"token punctuation",children:","})," initialState",(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsx)(e.span,{className:"code-line",children:"\n"}),(0,c.jsxs)(e.span,{className:"code-line",children:["  ",(0,c.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["    ",(0,c.jsxs)(e.span,{className:"token tag",children:[(0,c.jsx)(e.span,{className:"token tag",children:(0,c.jsx)(e.span,{className:"token punctuation",children:"<"})}),(0,c.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,c.jsx)(e.span,{className:"token plain-text",children:"\n"})]}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token plain-text",children:"      Count: "}),(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),"state",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token property-access",children:"count"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,c.jsx)(e.span,{className:"token plain-text",children:"\n"})]}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token plain-text",children:"      "}),(0,c.jsxs)(e.span,{className:"token tag",children:[(0,c.jsxs)(e.span,{className:"token tag",children:[(0,c.jsx)(e.span,{className:"token punctuation",children:"<"}),"button"]})," ",(0,c.jsx)(e.span,{className:"token attr-name",children:"onClick"}),(0,c.jsxs)(e.span,{className:"token script language-javascript",children:[(0,c.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),(0,c.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,c.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,c.jsx)(e.span,{className:"token function",children:"dispatch"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,c.jsx)(e.span,{className:"token literal-property property",children:"type"}),(0,c.jsx)(e.span,{className:"token operator",children:":"})," ",(0,c.jsx)(e.span,{className:"token string",children:'"increment"'}),(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"}"})]}),(0,c.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,c.jsx)(e.span,{className:"token plain-text",children:"+"}),(0,c.jsxs)(e.span,{className:"token tag",children:[(0,c.jsxs)(e.span,{className:"token tag",children:[(0,c.jsx)(e.span,{className:"token punctuation",children:"</"}),"button"]}),(0,c.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,c.jsx)(e.span,{className:"token plain-text",children:"\n"})]}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token plain-text",children:"      "}),(0,c.jsxs)(e.span,{className:"token tag",children:[(0,c.jsxs)(e.span,{className:"token tag",children:[(0,c.jsx)(e.span,{className:"token punctuation",children:"<"}),"button"]})," ",(0,c.jsx)(e.span,{className:"token attr-name",children:"onClick"}),(0,c.jsxs)(e.span,{className:"token script language-javascript",children:[(0,c.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),(0,c.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,c.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,c.jsx)(e.span,{className:"token function",children:"dispatch"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,c.jsx)(e.span,{className:"token literal-property property",children:"type"}),(0,c.jsx)(e.span,{className:"token operator",children:":"})," ",(0,c.jsx)(e.span,{className:"token string",children:'"decrement"'}),(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"}"})]}),(0,c.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,c.jsx)(e.span,{className:"token plain-text",children:"-"}),(0,c.jsxs)(e.span,{className:"token tag",children:[(0,c.jsxs)(e.span,{className:"token tag",children:[(0,c.jsx)(e.span,{className:"token punctuation",children:"</"}),"button"]}),(0,c.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,c.jsx)(e.span,{className:"token plain-text",children:"\n"})]}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token plain-text",children:"    "}),(0,c.jsxs)(e.span,{className:"token tag",children:[(0,c.jsx)(e.span,{className:"token tag",children:(0,c.jsx)(e.span,{className:"token punctuation",children:"</"})}),(0,c.jsx)(e.span,{className:"token punctuation",children:">"})]}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["  ",(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),"\n"]})]})}),"\n",(0,c.jsxs)(e.h3,{id:"dos-and-donts",children:["Doâs and donâts",(0,c.jsx)(e.a,{className:"heading-link","aria-label":'Permalink to "Doâs and donâts"',href:"#dos-and-donts",children:(0,c.jsx)(e.svg,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16",width:"16",height:"16",fill:"currentColor","aria-hidden":"true",children:(0,c.jsx)(e.path,{d:"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"})})})]}),"\n",(0,c.jsxs)(e.h4,{id:"never-render-a-list-of-children-without-assigning-a-unique-key-to-each",children:["Never render a list of children without assigning a unique key to each",(0,c.jsx)(e.a,{className:"heading-link","aria-label":'Permalink to "Never render a list of children without assigning a unique key to each"',href:"#never-render-a-list-of-children-without-assigning-a-unique-key-to-each",children:(0,c.jsx)(e.svg,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16",width:"16",height:"16",fill:"currentColor","aria-hidden":"true",children:(0,c.jsx)(e.path,{d:"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"})})})]}),"\n",(0,c.jsx)(e.p,{children:"This ca

1n have a huge impact on the performance, even bigger if you render a big list of elements. As from React documentation:"}),"\n",(0,c.jsxs)(e.blockquote,{children:["\n",(0,c.jsx)(e.p,{children:"Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity. The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys."}),"\n"]}),"\n",(0,c.jsx)(e.p,{children:(0,c.jsx)(e.strong,{children:"Donât:"})}),"\n",(0,c.jsx)(e.pre,{className:"language-jsx",children:(0,c.jsxs)(e.code,{className:"language-jsx code-highlight",children:[(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"class"})," ",(0,c.jsx)(e.span,{className:"token class-name",children:"FooComponent"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"extends"})," ",(0,c.jsxs)(e.span,{className:"token class-name",children:["React",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),"Component"]})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["  ",(0,c.jsx)(e.span,{className:"token function",children:"render"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),(0,c.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["    ",(0,c.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"this"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token property-access",children:"props"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token property-access",children:"data"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token method function property-access",children:"map"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),(0,c.jsx)(e.span,{className:"token parameter",children:"item"})," ",(0,c.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,c.jsxs)(e.span,{className:"token tag",children:[(0,c.jsxs)(e.span,{className:"token tag",children:[(0,c.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,c.jsx)(e.span,{className:"token class-name",children:"Item"})]})," ",(0,c.jsx)(e.span,{className:"token attr-name",children:"data"}),(0,c.jsxs)(e.span,{className:"token script language-javascript",children:[(0,c.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),"item",(0,c.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["  ",(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),"\n"]}),(0,c.jsx)(e.span,{className:"code-line",children:"\n"}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"class"})," ",(0,c.jsx)(e.span,{className:"token class-name",children:"FooComponent"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"extends"})," ",(0,c.jsxs)(e.span,{className:"token class-name",children:["React",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),"Component"]})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["  ",(0,c.jsx)(e.span,{className:"token function",children:"render"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),(0,c.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["    ",(0,c.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"this"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token property-access",children:"props"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token property-access",children:"data"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token method function property-access",children:"map"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),(0,c.jsxs)(e.span,{className:"token parameter",children:["item",(0,c.jsx)(e.span,{className:"token punctuation",children:","})," index"]}),(0,c.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,c.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,c.jsxs)(e.span,{className:"token tag",children:[(0,c.jsxs)(e.span,{className:"token tag",children:[(0,c.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,c.jsx)(e.span,{className:"token class-name",children:"Item"})]})," ",(0,c.jsx)(e.span,{className:"token attr-name",children:"key"}),(0,c.jsxs)(e.span,{className:"token script language-javascript",children:[(0,c.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),"index",(0,c.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,c.jsx)(e.span,{className:"token attr-name",children:"data"}),(0,c.jsxs)(e.span,{className:"token script language-javascript",children:[(0,c.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),"item",(0,c.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["  ",(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),"\n"]})]})}),"\n",(0,c.jsx)(e.p,{children:(0,c.jsx)(e.strong,{children:"Do:"})}),"\n",(0,c.jsx)(e.pre,{className:"language-jsx",children:(0,c.jsxs)(e.code,{className:"language-jsx code-highlight",children:[(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"class"})," ",(0,c.jsx)(e.span,{className:"token class-name",children:"FooComponent"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"extends"})," ",(0,c.jsxs)(e.span,{className:"token class-name",children:["React",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),"Component"]})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["  ",(0,c.jsx)(e.span,{className:"token function",children:"render"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),(0,c.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["    ",(0,c.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"this"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token property-access",children:"props"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token property-access",children:"data"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token method function property-access",children:"map"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),(0,c.jsx)(e.span,{className:"token parameter",children:"item"})," ",(0,c.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,c.jsxs)(e.span,{className:"token tag",children:[(0,c.jsxs)(e.span,{className:"token tag",children:[(0,c.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,c.jsx)(e.span,{className:"token class-name",children:"Item"})]})," ",(0,c.jsx)(e.span,{className:"token attr-name",children:"key"}),(0,c.jsxs)(e.span,{className:"token script language-javascript",children:[(0,c.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),"item",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token property-access",children:"id"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,c.jsx)(e.span,{className:"token attr-name",children:"data"}),(0,c.jsxs)(e.span,{className:"token script language-javascript",children:[(0,c.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),"item",(0,c.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["  ",(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),"\n"]})]})}),"\n",(0,c.jsxs)(e.h4,{id:"never-create-functions-or-objects-in-props",children:["Never create functions or objects in props",(0,c.jsx)(e.a,{className:"heading-link","aria-label":'Permalink to "Never create functions or objects in props"',href:"#never-create-functions-or-objects-in-props",children:(0,c.jsx)(e.svg,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16",width:"16",height:"16",fill:"currentColor","aria-hidden":"true",children:(0,c.jsx)(e.path,{d:"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"})})})]}),"\n",(0,c.jsx)(e.p,{children:"This can have a huge impact on the performance. If you create new objects or functions in the props, a new reference will be passed down to the child each time its parents re-render, resulting in unnecessary re-renders and probably more unwanted behaviors."}),"\n",(0,c.jsx)(e.p,{children:(0,c.jsx)(e.strong,{children:"Donât:"})}),"\n",(0,c.jsx)(e.pre,{className:"language-jsx",children:(0,c.jsxs)(e.code,{className:"language-jsx code-highlight",children:[(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"class"})," ",(0,c.jsx)(e.span,{className:"token class-name",children:"FooComponent"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"extends"})," ",(0,c.jsxs)(e.span,{className:"token class-name",children:["React",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),"Component"]})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["  ",(0,c.jsx)(e.span,{className:"token function",children:"render"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),(0,c.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["    ",(0,c.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["      ",(0,c.jsxs)(e.span,{className:"token tag",children:[(0,c.jsxs)(e.span,{className:"token tag",children:[(0,c.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,c.jsx)(e.span,{className:"token class-name",children:"FooChild"})]}),"\n"]})]}),(0,c.jsx)(e.span,{className:"code-line",children:(0,c.jsxs)(e.span,{className:"token tag",children:["        ",(0,c.jsx)(e.span,{className:"token attr-name",children:"onClick"}),(0,c.jsxs)(e.span,{className:"token script language-javascript",children:[(0,c.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),(0,c.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,c.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"this"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token property-access",children:"props"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token method function property-access",children:"handleClick"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),(0,c.jsx)(e.span,{className:"token spread operator",children:"..."}),"args",(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"}"})]}),"\n"]})}),(0,c.jsx)(e.span,{className:"code-line",children:(0,c.jsxs)(e.span,{className:"token tag",children:["        ",(0,c.jsx)(e.span,{className:"token attr-name",children:"data"}),(0,c.jsxs)(e.span,{className:"token script language-javascript",children:[(0,c.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,c.jsx)(e.span,{className:"token keyword",children:"this"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token property-access",children:"props"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token method function property-access",children:"filter"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),(0,c.jsx)(e.span,{className:"token parameter",children:"item"})," ",(0,c.jsx)(e.span,{className:"token arrow operator",children:"=>"})," item",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token property-access",children:"id"})," ",(0,c.jsx)(e.span,{className:"token operator",children:"==="})," ",(0,c.jsx)(e.span,{className:"token number",children:"5"}),(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"}"})]}),"\n"]})}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsxs)(e.span,{className:"token tag",children:["      ",(0,c.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["    ",(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["  ",(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),"\n"]})]})}),"\n",(0,c.jsx)(e.p,{children:(0,c.jsx)(e.strong,{children:"Do:"})}),"\n",(0,c.jsx)(e.pre,{className:"language-jsx",children:(0,c.jsxs)(e.code,{className:"language-jsx code-highlight",children:[(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"class"})," ",(0,c.jsx)(e

1.span,{className:"token class-name",children:"FooComponent"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"extends"})," ",(0,c.jsxs)(e.span,{className:"token class-name",children:["React",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),"Component"]})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["  ",(0,c.jsx)(e.span,{className:"token function-variable function",children:"onClick"})," ",(0,c.jsx)(e.span,{className:"token operator",children:"="})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),(0,c.jsxs)(e.span,{className:"token parameter",children:[(0,c.jsx)(e.span,{className:"token spread operator",children:"..."}),"args"]}),(0,c.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,c.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,c.jsx)(e.span,{className:"token parameter",children:"event"})," ",(0,c.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["    ",(0,c.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"this"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token property-access",children:"props"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token method function property-access",children:"handleClick"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),(0,c.jsx)(e.span,{className:"token spread operator",children:"..."}),"args",(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["  ",(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsx)(e.span,{className:"code-line",children:"\n"}),(0,c.jsxs)(e.span,{className:"code-line",children:["  ",(0,c.jsx)(e.span,{className:"token function",children:"render"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),(0,c.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["    ",(0,c.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["      ",(0,c.jsxs)(e.span,{className:"token tag",children:[(0,c.jsxs)(e.span,{className:"token tag",children:[(0,c.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,c.jsx)(e.span,{className:"token class-name",children:"FooChild"})]}),"\n"]})]}),(0,c.jsx)(e.span,{className:"code-line",children:(0,c.jsxs)(e.span,{className:"token tag",children:["        ",(0,c.jsx)(e.span,{className:"token attr-name",children:"onClick"}),(0,c.jsxs)(e.span,{className:"token script language-javascript",children:[(0,c.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,c.jsx)(e.span,{className:"token keyword",children:"this"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token method function property-access",children:"onClick"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"("}),(0,c.jsx)(e.span,{className:"token spread operator",children:"..."}),"args",(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"}"})]}),"\n"]})}),(0,c.jsx)(e.span,{className:"code-line",children:(0,c.jsxs)(e.span,{className:"token tag",children:["        ",(0,c.jsx)(e.span,{className:"token attr-name",children:"data"}),(0,c.jsxs)(e.span,{className:"token script language-javascript",children:[(0,c.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,c.jsx)(e.span,{className:"token keyword",children:"this"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token property-access",children:"props"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token property-access",children:"filteredData"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"}"})]}),"\n"]})}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsxs)(e.span,{className:"token tag",children:["      ",(0,c.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["    ",(0,c.jsx)(e.span,{className:"token punctuation",children:")"}),(0,c.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["  ",(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),"\n"]})]})}),"\n",(0,c.jsxs)(e.h4,{id:"avoid-duplicating-data-between-props-and-state",children:["Avoid duplicating data between props and state",(0,c.jsx)(e.a,{className:"heading-link","aria-label":'Permalink to "Avoid duplicating data between props and state"',href:"#avoid-duplicating-data-between-props-and-state",children:(0,c.jsx)(e.svg,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16",width:"16",height:"16",fill:"currentColor","aria-hidden":"true",children:(0,c.jsx)(e.path,{d:"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"})})})]}),"\n",(0,c.jsxs)(e.p,{children:["If some data can be derived or calculated directly from the props, itâs unnecessary to replicate this data in the state. Props should be the only source of truth. In fact â if you want to calculate the state based on the received props, youâll need to create a ",(0,c.jsx)(e.code,{children:"componentDidUpdate"})," method and keep your state and props in sync â this is an anti-pattern."]}),"\n",(0,c.jsx)(e.p,{children:"The only case when assigning props to a state is acceptable is to pass initial data to a component that doesnât need to be in sync with the store, e.g. forms."}),"\n",(0,c.jsx)(e.p,{children:(0,c.jsx)(e.strong,{children:"Avoid:"})}),"\n",(0,c.jsx)(e.pre,{className:"language-jsx",children:(0,c.jsxs)(e.code,{className:"language-jsx code-highlight",children:[(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token keyword",children:"class"})," ",(0,c.jsx)(e.span,{className:"token class-name",children:"FooComponent"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"extends"})," ",(0,c.jsxs)(e.span,{className:"token class-name",children:["React",(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),"Component"]})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["  state ",(0,c.jsx)(e.span,{className:"token operator",children:"="})," ",(0,c.jsx)(e.span,{className:"token punctuation",children:"{"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["    ",(0,c.jsx)(e.span,{className:"token literal-property property",children:"foo"}),(0,c.jsx)(e.span,{className:"token operator",children:":"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"this"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token property-access",children:"props"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token property-access",children:"foo"}),(0,c.jsx)(e.span,{className:"token punctuation",children:","}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["    ",(0,c.jsx)(e.span,{className:"token literal-property property",children:"bar"}),(0,c.jsx)(e.span,{className:"token operator",children:":"})," ",(0,c.jsx)(e.span,{className:"token keyword",children:"this"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token property-access",children:"props"}),(0,c.jsx)(e.span,{className:"token punctuation",children:"."}),(0,c.jsx)(e.span,{className:"token property-access",children:"bar"}),(0,c.jsx)(e.span,{className:"token punctuation",children:","}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:["  ",(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),"\n"]}),(0,c.jsxs)(e.span,{className:"code-line",children:[(0,c.jsx)(e.span,{className:"token punctuation",children:"}"}),"\n"]})]})}),"\n",(0,c.jsxs)(e.h4,{id:"avoid-overusing-hocs",children:["Avoid overusing HOCs",(0,c.jsx)(e.a,{className:"heading-link","aria-label":'Permalink to "Avoid overusing HOCs"',href:"#avoid-overusing-hocs",children:(0,c.jsx)(e.svg,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16",width:"16",height:"16",fill:"currentColor","aria-hidden":"true",children:(0,c.jsx)(e.path,{d:"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"})})})]}),"\n",(0,c.jsx)(e.p,{children:"As Michael Jackson (React-Router co-creator) said:"}),"\n",(0,c.jsxs)(e.blockquote,{children:["\n",(0,c.jsxs)(e.p,{children:["âNext time you think you need a HOC (higher-order component) in, you probably donât. I can do anything youâre doing with your HOC using a regular component with a ",(0,c.jsx)(e.a,{href:"https://legacy.reactjs.org/docs/render-props.html",rel:"nofollow noopener noreferrer",target:"_blank",children:"render prop"}),".â â ",(0,c.jsx)(e.a,{href:"https://twitter.com/mjackson/status/885910553432018945",rel:"nofollow noopener noreferrer",target:"_blank",children:"Michael Jackson"})]}),"\n"]}),"\n",(0,c.jsxs)(e.h4,{id:"avoid-using-components-without-shouldcomponentupdate",children:["Avoid using Components without ",(0,c.jsx)(e.code,{children:"shouldComponentUpdate"}),(0,c.jsx)(e.a,{className:"heading-link","aria-label":'Permalink to "Avoid using Components without "',href:"#avoid-using-components-without-shouldcomponentupdate",children:(0,c.jsx)(e.svg,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16",width:"16",height:"16",fill:"currentColor","aria-hidden":"true",children:(0,c.jsx)(e.path,{d:"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"})})})]}),"\n",(0,c.jsxs)(e.p,{children:["A ",(0,c.jsx)(e.a,{href:"https://react.dev/reference/react/Component",rel:"nofollow noopener noreferrer",target:"_blank",children:(0,c.jsx)(e.code,{children:"React.Component"})}),", when used without ",(0,c.jsx)(e.code,{children:"shouldComponentUpdate"}),", will re-render on every prop and state change."]}),"\n",(0,c.jsxs)(e.ol,{children:["\n",(0,c.jsxs)(e.li,{children:["Consider creating a ",(0,c.jsx)(e.code,{children:"shouldComponentUpdate() "}),"method to prevent unnecessary re-renders."]}),"\n",(0,c.jsxs)(e.li,{children:["Consider using the built-in ",(0,c.jsx)(e.code,{children:"PureC

1omponent"})," instead of writing ",(0,c.jsx)(e.code,{children:"shouldComponentUpdate"})," by hand. ",(0,c.jsx)(e.code,{children:"PureComponent"})," performs a shallow comparison of props and state, and reduces the chance that youâll skip a necessary update."]}),"\n"]})]})}var o=function(s){void 0===s&&(s={});const{wrapper:e}=Object.assign({},(0,t.a)(),s.components);return e?(0,c.jsx)(e,Object.assign({},s,{children:(0,c.jsx)(l,s)})):l(s)};var i=n(4361),r=n(8029),p=n(8875),d=n(180),h=n(5551),m=n(9213),x=n(3120),u=n(6026),j=n(2349),N=n(7123);function k(s){let{data:e,pageContext:n,children:a}=s;const l=n.data,{frontmatter:o,tableOfContents:j}=l,{slug:k,timeToRead:g}=l.fields,{title:w,language:y,authors:f,datePublished:b,datePublishedMeta:v,dateUpdated:C,dateUpdatedMeta:P}=o,S=`${e.site.siteMetadata.siteUrl}/thumbnails/${(0,i.H)(k)}.png`;return(0,c.jsx)(h.A,{children:(0,c.jsx)(p.V,{children:(0,c.jsxs)("article",{className:"post",itemScope:!0,itemType:"http://schema.org/Article",lang:y,children:[(0,c.jsx)("meta",{itemProp:"image",content:S}),(0,c.jsx)("meta",{itemProp:"dateModified",content:P}),(0,c.jsx)("meta",{itemProp:"wordCount",content:`${g.words}`}),(0,c.jsxs)("header",{className:"post__header",children:[(0,c.jsx)("h1",{itemProp:"headline",children:w}),(0,c.jsxs)("p",{className:"post__header--metadata",children:[(0,c.jsx)(x.X,{data:f})," on ",(0,c.jsx)("time",{dateTime:v,itemProp:"datePublished",title:`Last modified on ${C}`,className:"post__header--date",children:b})," â¢ ",(0,c.jsx)(u.t,{value:g.minutes})]})]}),(0,c.jsxs)("div",{className:"post__wrapper",children:[j.items?(0,c.jsx)("div",{className:"post__toc",children:(0,c.jsx)(N.o,{data:j})}):null,(0,c.jsxs)("div",{className:"post__content",children:[(0,c.jsx)("div",{itemProp:"articleBody",children:(0,c.jsx)(t.Z,{components:{Alert:r.b,Newsletter:m.m},children:a})}),(0,c.jsx)(d.$,{lang:y})]})]})]})})})}function g(s){return a.createElement(k,s,a.createElement(o,s))}function w(s){let{data:e,pageContext:n}=s;const a=n.data,t=a.fields.slug,{excerpt:l}=a,{title:o,description:r}=a.frontmatter,p=e.site.siteMetadata.siteUrl,d=`${p}/thumbnails/${(0,i.H)(t)}.png`;return(0,c.jsx)(j.H,{url:`${p}${t}`,title:o,image:d,description:r||l,children:(0,c.jsx)("html",{className:"smooth-scroll"})})}}}]);
2//# sourceMappingURL=component---src-templates-blog-post-tsx-content-file-path-content-blog-2019-03-01-enterprise-scale-react-redux-project-architecture-index-md-89695ddf16b3f69ea48c.js.map

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.