var Component=(()=>{var p=Object.create;var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(s,e)=>()=>(e||s((e={exports:{}}).exports,e),e.exports),j=(s,e)=>{for(var a in e)l(s,a,{get:e[a],enumerable:!0})},r=(s,e,a,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of u(e))!g.call(s,t)&&t!==a&&l(s,t,{get:()=>e[t],enumerable:!(i=m(e,t))||i.enumerable});return s};var N=(s,e,a)=>(a=s!=null?p(b(s)):{},r(e||!s||!s.__esModule?l(a,"default",{value:s,enumerable:!0}):a,s)),v=s=>r(l({},"__esModule",{value:!0}),s);var h=f((C,c)=>{c.exports=_jsx_runtime});var _={};j(_,{default:()=>d,frontmatter:()=>w});var n=N(h()),w={title:"Pub-Sub in a React Application",excerpt:"I implemented the Pub-Sub pattern in a React application and I'm going to walk you through my learnings.",coverImage:{credit:"[Mika Baumeister](https://unsplash.com/photos/Y_LgXwQEx2c)"},tags:["javascript","reactjs","typescript"]};function o(s){let e={a:"a",blockquote:"blockquote",code:"code",em:"em",h2:"h2",li:"li",ol:"ol",p:"p",pre:"pre",span:"span",ul:"ul",...s.components},{Img:a}=e;return a||y("Img",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.blockquote,{children:[` `,(0,n.jsxs)(e.p,{children:[`TL;DR: I implemented the Pub-Sub pattern in a React application. Full sample code can be found `,(0,n.jsx)(e.a,{href:"https://codesandbox.io/s/react-with-observer-pattern-resv0",children:"here"}),"."]}),` `]}),` `,(0,n.jsx)(e.p,{children:"I was recently working on a React application and hit a scenario I thought it could be a dead end:"}),` `,(0,n.jsxs)(e.ol,{children:[` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:""})," renders ",(0,n.jsx)(e.code,{children:""})," but both live in separate repositories. This is not a problem per-se and even if they live in the same repository, I would have hit the same scenario."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:""})," is fully autonomous and knows how to fetch data, but doesn't know how to ",(0,n.jsx)(e.a,{href:"https://en.wikipedia.org/wiki/Create,_read,_update_and_delete",children:"CRUD"}),"."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:""})," knows how to CRUD and needs to tell ",(0,n.jsx)(e.code,{children:""})," to update itself when something has been created, deleted or updated."]}),` `]}),` `,(0,n.jsxs)(e.p,{children:["The reason ",(0,n.jsx)(e.code,{children:""})," doesn\u2019t know how to CRUD is because it can be reused by other parent components where CRUD flows are specific for each one of them and such flows can\u2019t be shared."]}),` `,(0,n.jsxs)(e.p,{children:["The main design decision is that ",(0,n.jsx)(e.code,{children:""})," should hold the knowledge on how to get data and we can't send it as a ",(0,n.jsx)(e.code,{children:"prop"})," via ",(0,n.jsx)(e.code,{children:""}),`. Needless to say that fetching data on `,(0,n.jsx)(e.code,{children:""}),"'s side is a very expensive and complex process to be replicated everywhere."]}),` `,(0,n.jsxs)(e.p,{children:["For that reason, I\u2019ve decided to implement the ",(0,n.jsx)(e.a,{href:"https://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern",children:"Publish-subscribe"})," pattern."]}),` `,(0,n.jsx)(e.h2,{id:"publish-subscribe-pattern",children:"Publish-subscribe Pattern"}),` `,(0,n.jsxs)(e.p,{children:["Publish-subscribe (pub-sub) is a messaging pattern where ",(0,n.jsx)(e.em,{children:"publishers"})," broadcast messages to its ",(0,n.jsx)(e.em,{children:"subscribers"})," that are listening to specific events that happen over time."]}),` `,(0,n.jsx)(e.p,{children:"Think of an e-commerce website with a mini shopping-cart widget in the header: when a customer clicks to buy a product, the shopping cart is automatically updated with the amount of items and price updates so customers have a fast feedback on how much they are going to pay for their purchase."}),` `,(0,n.jsx)(a,{alt:"Shopping cart updates in e-commerce websites (Amazon, Zalando and ASOS)",height:"173",src:"/assets/blog/2021-04-06-pub-sub-in-a-react-application/shopping-cart.png",title:"Shopping cart updates in e-commerce websites (Amazon, Zalando and ASOS)",width:"323"}),` `,(0,n.jsxs)(e.p,{children:["In some cases, both header and the product page are completely different applications that neither can\u2019t communicate directly with each other nor share the same ",(0,n.jsx)(e.code,{children:""})," component. Thus the reason they need some sort of messaging communication to start sharing data back and forth between them."]}),` `,(0,n.jsxs)(e.p,{children:["Another example is a chat application where events (messages) don\u2019t come very often. So we also need to put a ",(0,n.jsx)(e.em,{children:"listener"})," in place that notifies us when a new message comes in."]}),` `,(0,n.jsxs)(e.p,{children:["This messaging pattern is also widely used by the ",(0,n.jsx)(e.a,{href:"https://en.wikipedia.org/wiki/Observer_pattern",children:"Observer pattern"}),": a subject keeps a list of dependents (",(0,n.jsx)(e.em,{children:"also known as observers"}),`) and notifies them of any changes or events. Each observer will then use the streamed data and act accordingly by making API calls, database calls, changes in the UI, etc.`]}),` `,(0,n.jsx)(e.p,{children:"You might also find the above described as Event Bus: an event-driven system that implements the pub-sub pattern."}),` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.a,{href:"https://react-query.tanstack.com/",children:"React Query"}),", one of the most popular data fetching libraries for React (by the time of this writing), ",(0,n.jsx)(e.a,{href:"https://github.com/tannerlinsley/react-query/search?l=TypeScript&q=observer",children:"uses this pattern"})," in its codebase to notify changes in queries, mutations and cache too."]}),` `,(0,n.jsx)(e.h2,{id:"the-observer-class",children:"The Observer class"}),` `,(0,n.jsx)(e.p,{children:"Now that the overall concept is known, it\u2019s time to code!"}),` `,(0,n.jsxs)(e.p,{children:["My initial approach is to create an ",(0,n.jsx)(e.code,{children:"Observer"})," class with tree methods: ",(0,n.jsx)(e.code,{children:"on"}),", ",(0,n.jsx)(e.code,{children:"off"})," and ",(0,n.jsx)(e.code,{children:"notify"}),"."]}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"on"}),": method used to subscribe an observer or, in this case, an event ",(0,n.jsx)(e.code,{children:""})," is going to be listening to."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"off"}),": method to unsubscribe an observer. This is going to be used when an observer is no longer needed or if you ",(0,n.jsx)(e.a,{href:"https://reactjs.org/docs/thinking-in-react.html",children:"think in React"}),", to be used in the cleanup method inside a ",(0,n.jsx)(e.a,{href:"https://reactjs.org/docs/hooks-effect.html",children:"useEffect"})," hook."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"notify"}),": method that is going to broadcast events to all listeners in the app."]}),` `]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsxs)(e.code,{className:"hljs language-ts",children:[(0,n.jsx)(e.span,{className:"hljs-keyword",children:"type"})," ",(0,n.jsx)(e.span,{className:"hljs-title class_",children:"EventObserverType"}),` = { [`,(0,n.jsx)(e.span,{className:"hljs-attr",children:"event"}),": ",(0,n.jsx)(e.span,{className:"hljs-built_in",children:"string"}),"]: ",(0,n.jsx)(e.span,{className:"hljs-title class_",children:"Function"}),`[] } `,(0,n.jsx)(e.span,{className:"hljs-keyword",children:"class"})," ",(0,n.jsx)(e.span,{className:"hljs-title class_",children:"EventObserver"}),` { `,(0,n.jsx)(e.span,{className:"hljs-keyword",children:"private"})," ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"observers"}),": ",(0,n.jsx)(e.span,{className:"hljs-title class_",children:"EventObserverType"}),` = {} `,(0,n.jsx)(e.span,{className:"hljs-title function_",children:"on"}),"(",(0,n.jsxs)(e.span,{className:"hljs-params",children:["event: ",(0,n.jsx)(e.span,{className:"hljs-built_in",children:"string"}),", observer: ",(0,n.jsx)(e.span,{className:"hljs-built_in",children:"Function"})]}),`) { `,(0,n.jsx)(e.span,{className:"hljs-keyword",children:"if"})," (!",(0,n.jsx)(e.span,{className:"hljs-variable language_",children:"this"}),".",(0,n.jsx)(e.span,{className:"hljs-property",children:"observers"}),`[event]) { `,(0,n.jsx)(e.span,{className:"hljs-variable language_",children:"this"}),".",(0,n.jsx)(e.span,{className:"hljs-property",children:"observers"}),`[event] = [] } `,(0,n.jsx)(e.span,{className:"hljs-variable language_",children:"this"}),".",(0,n.jsx)(e.span,{className:"hljs-property",children:"observers"}),"[event].",(0,n.jsx)(e.span,{className:"hljs-title function_",children:"push"}),`(observer) } `,(0,n.jsx)(e.span,{className:"hljs-title function_",children:"off"}),"(",(0,n.jsxs)(e.span,{className:"hljs-params",children:["event: ",(0,n.jsx)(e.span,{className:"hljs-built_in",children:"string"}),", observer: ",(0,n.jsx)(e.span,{className:"hljs-built_in",children:"Function"})]}),`) { `,(0,n.jsx)(e.span,{className:"hljs-keyword",children:"if"})," (!",(0,n.jsx)(e.span,{className:"hljs-variable language_",children:"this"}),".",(0,n.jsx)(e.span,{className:"hljs-property",children:"observers"}),`[event]) { `,(0,n.jsx)(e.span,{className:"hljs-keyword",children:"return"}),` } `,(0,n.jsx)(e.span,{className:"hljs-variable language_",children:"this"}),".",(0,n.jsx)(e.span,{className:"hljs-property",children:"observers"}),"[event] = ",(0,n.jsx)(e.span,{className:"hljs-variable language_",children:"this"}),".",(0,n.jsx)(e.span,{className:"hljs-property",children:"observers"}),"[event].",(0,n.jsx)(e.span,{className:"hljs-title function_",children:"filter"}),`( `,(0,n.jsxs)(e.span,{className:"hljs-function",children:["(",(0,n.jsx)(e.span,{className:"hljs-params",children:"ob"}),") =>"]}),` ob !== observer ) } `,(0,n.jsx)(e.span,{className:"hljs-title function_",children:"notify"}),"(",(0,n.jsxs)(e.span,{className:"hljs-params",children:["event: ",(0,n.jsx)(e.span,{className:"hljs-built_in",children:"string"}),", ...args: ",(0,n.jsx)(e.span,{className:"hljs-built_in",children:"string"}),"[]"]}),`) { `,(0,n.jsx)(e.span,{className:"hljs-keyword",children:"if"})," (!",(0,n.jsx)(e.span,{className:"hljs-variable language_",children:"this"}),".",(0,n.jsx)(e.span,{className:"hljs-property",children:"observers"}),`[event]) { `,(0,n.jsx)(e.span,{className:"hljs-keyword",children:"return"}),` } `,(0,n.jsx)(e.span,{className:"hljs-variable language_",children:"this"}),".",(0,n.jsx)(e.span,{className:"hljs-property",children:"observers"}),"[event].",(0,n.jsx)(e.span,{className:"hljs-title function_",children:"forEach"}),"(",(0,n.jsxs)(e.span,{className:"hljs-function",children:["(",(0,n.jsx)(e.span,{className:"hljs-params",children:"observer"}),") =>"]})," ",(0,n.jsx)(e.span,{className:"hljs-title function_",children:"observer"}),`(...args)) } } `]})}),` `,(0,n.jsx)(e.h2,{id:"using-the-observer",children:"Using the Observer"}),` `,(0,n.jsxs)(e.p,{children:["We\u2019ve got two next steps: set up the observer in ",(0,n.jsx)(e.code,{children:""})," so it can listen to events and notify/trigger those events from ",(0,n.jsx)(e.code,{children:""}),":"]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsxs)(e.code,{className:"hljs language-ts",children:[(0,n.jsx)(e.span,{className:"hljs-keyword",children:"function"})," ",(0,n.jsx)(e.span,{className:"hljs-title function_",children:"Child"}),"(",(0,n.jsx)(e.span,{className:"hljs-params"}),`) { `,(0,n.jsxs)(e.span,{className:"hljs-comment",children:[`/** * subscribes to `,(0,n.jsx)(e.span,{className:"hljs-doctag",children:"@ACTION"}),`_NAME event to execute "runsSomeComplexCode" method */`]}),` `,(0,n.jsx)(e.span,{className:"hljs-title function_",children:"useEffect"}),"(",(0,n.jsx)(e.span,{className:"hljs-function",children:"() =>"}),` { `,(0,n.jsx)(e.span,{className:"hljs-keyword",children:"function"})," ",(0,n.jsx)(e.span,{className:"hljs-title function_",children:"runsSomeComplexCode"}),"(",(0,n.jsx)(e.span,{className:"hljs-params"}),`) { `,(0,n.jsx)(e.span,{className:"hljs-comment",children:"// ..."}),` } eventObserver.`,(0,n.jsx)(e.span,{className:"hljs-title function_",children:"on"}),"(",(0,n.jsx)(e.span,{className:"hljs-string",children:"'@ACTION_NAME'"}),`, runsSomeComplexCode) `,(0,n.jsx)(e.span,{className:"hljs-keyword",children:"return"})," ",(0,n.jsx)(e.span,{className:"hljs-function",children:"() =>"}),` { eventObserver.`,(0,n.jsx)(e.span,{className:"hljs-title function_",children:"off"}),"(",(0,n.jsx)(e.span,{className:"hljs-string",children:"'@ACTION_NAME'"}),`, runsSomeComplexCode) } }, []) `,(0,n.jsx)(e.span,{className:"hljs-comment",children:"// ..."}),` } `,(0,n.jsx)(e.span,{className:"hljs-keyword",children:"function"})," ",(0,n.jsx)(e.span,{className:"hljs-title function_",children:"Parent"}),"(",(0,n.jsx)(e.span,{className:"hljs-params"}),`) { `,(0,n.jsx)(e.span,{className:"hljs-keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"hljs-title function_",children:"sendUpdates"})," = (",(0,n.jsx)(e.span,{className:"hljs-params"}),") => eventObserver.",(0,n.jsx)(e.span,{className:"hljs-title function_",children:"notify"}),"(",(0,n.jsx)(e.span,{className:"hljs-string",children:"'@ACTION_NAME'"}),`) `,(0,n.jsx)(e.span,{className:"hljs-keyword",children:"return"}),` ( `,(0,n.jsxs)(e.span,{className:"xml",children:[(0,n.jsxs)(e.span,{className:"hljs-tag",children:["<",(0,n.jsx)(e.span,{className:"hljs-name",children:"div"}),">"]}),` `,(0,n.jsxs)(e.span,{className:"hljs-tag",children:["<",(0,n.jsx)(e.span,{className:"hljs-name",children:"Child"})," />"]}),` `,(0,n.jsxs)(e.span,{className:"hljs-tag",children:["<",(0,n.jsx)(e.span,{className:"hljs-name",children:"button"})," ",(0,n.jsx)(e.span,{className:"hljs-attr",children:"onClick"}),"=",(0,n.jsx)(e.span,{className:"hljs-string",children:"{sendUpdates}"}),">"]}),"Trigger updates in Child component",(0,n.jsxs)(e.span,{className:"hljs-tag",children:[""]}),` `,(0,n.jsxs)(e.span,{className:"hljs-tag",children:[""]})]}),` ) } `]})}),` `,(0,n.jsx)(e.h2,{id:"conclusion",children:"Conclusion"}),` `,(0,n.jsxs)(e.p,{children:[`Propagating props top-down in React is definitely a better approach. `,(0,n.jsx)(e.code,{children:""})," should probably own the data while ",(0,n.jsx)(e.code,{children:""})," would act as a \u201Cdumb\u201D component."]}),` `,(0,n.jsxs)(e.p,{children:["As I have explained at the start of this post I was unable to follow that path and ",(0,n.jsx)(e.a,{href:"https://reactjs.org/docs/lifting-state-up.html",children:"lifting state up"}),` could not help me this time. So I had to improvise.`]}),` `,(0,n.jsx)(e.p,{children:"All things considered, I\u2019m pretty happy with this approach and what I initially thought would be a dead end turned out to become a blog post for me to share some of my learnings."}),` `,(0,n.jsxs)(e.p,{children:["You can find a full example in this ",(0,n.jsx)(e.a,{href:"https://codesandbox.io/s/react-with-observer-pattern-resv0",children:"codesandbox"}),"."]}),` `,(0,n.jsx)(e.p,{children:"I hope that's helpful and interesting to you. \u{1F44B}\u{1F3FC}"})]})}function d(s={}){let{wrapper:e}=s.components||{};return e?(0,n.jsx)(e,{...s,children:(0,n.jsx)(o,{...s})}):o(s)}function y(s,e){throw new Error("Expected "+(e?"component":"object")+" `"+s+"` to be defined: you likely forgot to import, pass, or provide it.")}return v(_);})(); ;return Component;