1import{S as n,x as t,e as c,M as o}from"./main-Ex-1LHMJ.js";import{m as s}from"./mdx-LEb1kaIk.js";import{B as m}from"./Buttons-E-yT_r7C.js";import{F as p}from"./Form-cLix5-9l.js";const l={$isLoggedIn:new n(!1),$userName:new n(""),$email:new n("")};function x(a){l.$isLoggedIn.set(!0),l.$userName.set(a.username),l.$email.set(a.email)}function C(){l.$isLoggedIn.set(!1),l.$userName.set(""),l.$email.set("")}function E(){const{$isLoggedIn:a}=l;return t("div",{class:"m-4 rounded-lg bg-slate-300 p-8 drop-shadow-2xl"},c(([e])=>e.get()?t(h,null):t(j,null),[a]))}function h(){const{$userName:a,$email:e}=l;return t("div",null,t("p",null,"Welcome, ",a," ",e),t(m,{onClick:C},"Logout"))}function j(){const a="rounded p-2 m-2";return t(p,{onSubmit:x,class:"flex flex-col"},t("input",{type:"text",name:"username",placeholder:"User Name",class:a}),t("input",{type:"text",name:"email",placeholder:"Email",class:a}),t(m,{type:"submit",class:"m-2",size:"xl"},"Login"))}const y=void 0,w=o;function r(a){const e={code:"code",h1:"h1",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",span:"span",ul:"ul",...a.components};return s.xCreateElement(s.xFragment,null,s.xCreateElement("div",{class:"mdx max-w-3xl mb-48"},s.xCreateElement(e.h1,null,"Stores"),s.xCreateElement(e.h3,null,"Step 1: Setup Rezact Store"),s.xCreateElement(e.pre,null,s.xCreateElement(e.code,{class:"hljs language-javascript"},s.xCreateElement(e.span,{class:"hljs-keyword"},"export")," ",s.xCreateElement(e.span,{class:"hljs-keyword"},"const")," ",s.xCreateElement(e.span,{class:"hljs-attr"},"userStore"),`: any = { 2 `,s.xCreateElement(e.span,{class:"hljs-attr"},"$isLoggedIn"),": ",s.xCreateElement(e.span,{class:"hljs-literal"},"false"),`, 3 `,s.xCreateElement(e.span,{class:"hljs-attr"},"$userName"),": ",s.xCreateElement(e.span,{class:"hljs-string"},'""'),`, 4 `,s.xCreateElement(e.span,{class:"hljs-attr"},"$email"),": ",s.xCreateElement(e.span,{class:"hljs-string"},'""'),`, 5}; 6 7`,s.xCreateElement(e.span,{class:"hljs-keyword"},"export")," ",s.xCreateElement(e.span,{class:"hljs-keyword"},"function")," ",s.xCreateElement(e.span,{class:"hljs-title function_"},"logIn"),"(",s.xCreateElement(e.span,{class:"hljs-params"},"data"),`) { 8 userStore.`,s.xCreateElement(e.span,{class:"hljs-property"},"$isLoggedIn")," = ",s.xCreateElement(e.span,{class:"hljs-literal"},"true"),`; 9 userStore.`,s.xCreateElement(e.span,{class:"hljs-property"},"$userName")," = data.",s.xCreateElement(e.span,{class:"hljs-property"},"username"),`; 10 userStore.`,s.xCreateElement(e.span,{class:"hljs-property"},"$email")," = data.",s.xCreateElement(e.span,{class:"hljs-property"},"email"),`; 11} 12 13`,s.xCreateElement(e.span,{class:"hljs-keyword"},"export")," ",s.xCreateElement(e.span,{class:"hljs-keyword"},"function")," ",s.xCreateElement(e.span,{class:"hljs-title function_"},"logOut"),"(",s.xCreateElement(e.span,{class:"hljs-params"}),`) { 14 userStore.`,s.xCreateElement(e.span,{class:"hljs-property"},"$isLoggedIn")," = ",s.xCreateElement(e.span,{class:"hljs-literal"},"false"),`; 15 userStore.`,s.xCreateElement(e.span,{class:"hljs-property"},"$userName")," = ",s.xCreateElement(e.span,{class:"hljs-string"},'""'),`; 16 userStore.`,s.xCreateElement(e.span,{class:"hljs-property"},"$email")," = ",s.xCreateElement(e.span,{class:"hljs-string"},'""'),`; 17} 18`)),s.xCreateElement(e.h3,null,"Step 2: Use the Store"),s.xCreateElement(e.pre,null,s.xCreateElement(e.code,{class:"hljs language-jsx"},s.xCreateElement(e.span,{class:"hljs-keyword"},"import")," { logIn, logOut, userStore } ",s.xCreateElement(e.span,{class:"hljs-keyword"},"from")," ",s.xCreateElement(e.span,{class:"hljs-string"},'"src/lib/userStore"'),`; 19`,s.xCreateElement(e.span,{class:"hljs-keyword"},"import")," { ",s.xCreateElement(e.span,{class:"hljs-title class_"},"Btn")," } ",s.xCreateElement(e.span,{class:"hljs-keyword"},"from")," ",s.xCreateElement(e.span,{class:"hljs-string"},'"./Buttons"'),`; 20`,s.xCreateElement(e.span,{class:"hljs-keyword"},"import")," { ",s.xCreateElement(e.span,{class:"hljs-title class_"},"Form")," } ",s.xCreateElement(e.span,{class:"hljs-keyword"},"from")," ",s.xCreateElement(e.span,{class:"hljs-string"},'"./Form"'),`; 21 22`,s.xCreateElement(e.span,{class:"hljs-keyword"},"export")," ",s.xCreateElement(e.span,{class:"hljs-keyword"},"function")," ",s.xCreateElement(e.span,{class:"hljs-title function_"},"UserStore"),"(",s.xCreateElement(e.span,{class:"hljs-params"}),`) { 23 `,s.xCreateElement(e.span,{class:"hljs-keyword"},"const"),` { $isLoggedIn } = userStore; 24 25 `,s.xCreateElement(e.span,{class:"hljs-keyword"},"return"),` ( 26 `,s.xCreateElement(e.span,{class:"xml"},s.xCreateElement(e.span,{class:"hljs-tag"},"<",s.xCreateElement(e.span,{class:"hljs-name"},"div")," ",s.xCreateElement(e.span,{class:"hljs-attr"},"class"),"=",s.xCreateElement(e.span,{class:"hljs-string"},'"m-4 rounded-lg bg-slate-300 p-8 drop-shadow-2xl"'),">"),` 27 {$isLoggedIn ? `,s.xCreateElement(e.span,{class:"hljs-tag"},"<",s.xCreateElement(e.span,{class:"hljs-name"},"UserProfile")," />")," : ",s.xCreateElement(e.span,{class:"hljs-tag"},"<",s.xCreateElement(e.span,{class:"hljs-name"},"LoginForm")," />"),`} 28 `,s.xCreateElement(e.span,{class:"hljs-tag"},"</",s.xCreateElement(e.span,{class:"hljs-name"},"div"),">")),` 29 ); 30} 31 32`,s.xCreateElement(e.span,{class:"hljs-keyword"},"function")," ",s.xCreateElement(e.span,{class:"hljs-title function_"},"UserProfile"),"(",s.xCreateElement(e.span,{class:"hljs-params"}),`) { 33 `,s.xCreateElement(e.span,{class:"hljs-keyword"},"const"),` { $userName, $email } = userStore; 34 35 `,s.xCreateElement(e.span,{class:"hljs-keyword"},"return"),` ( 36 `,s.xCreateElement(e.span,{class:"xml"},s.xCreateElement(e.span,{class:"hljs-tag"},"<",s.xCreateElement(e.span,{class:"hljs-name"},"div"),">"),` 37 `,s.xCreateElement(e.span,{class:"hljs-tag"},"<",s.xCreateElement(e.span,{class:"hljs-name"},"p"),">"),` 38 Welcome, {$userName} {$email} 39 `,s.xCreateElement(e.span,{class:"hljs-tag"},"</",s.xCreateElement(e.span,{class:"hljs-name"},"p"),">"),` 40 `,s.xCreateElement(e.span,{class:"hljs-tag"},"<",s.xCreateElement(e.span,{class:"hljs-name"},"Btn")," ",s.xCreateElement(e.span,{class:"hljs-attr"},"onClick"),"=",s.xCreateElement(e.span,{class:"hljs-string"},"{logOut}"),">"),"Logout",s.xCreateElement(e.span,{class:"hljs-tag"},"</",s.xCreateElement(e.span,{class:"hljs-name"},"Btn"),">"),` 41 `,s.xCreateElement(e.span,{class:"hljs-tag"},"</",s.xCreateElement(e.span,{class:"hljs-name"},"div"),">")),` 42 ); 43} 44 45`,s.xCreateElement(e.span,{class:"hljs-keyword"},"function")," ",s.xCreateElement(e.span,{class:"hljs-title function_"},"LoginForm"),"(",s.xCreateElement(e.span,{class:"hljs-params"}),`) { 46 `,s.xCreateElement(e.span,{class:"hljs-keyword"}
46,"const")," cls = ",s.xCreateElement(e.span,{class:"hljs-string"},'"rounded p-2 m-2"'),`; 47 `,s.xCreateElement(e.span,{class:"hljs-keyword"},"return"),` ( 48 `,s.xCreateElement(e.span,{class:"xml"},s.xCreateElement(e.span,{class:"hljs-tag"},"<",s.xCreateElement(e.span,{class:"hljs-name"},"Form")," ",s.xCreateElement(e.span,{class:"hljs-attr"},"onSubmit"),"=",s.xCreateElement(e.span,{class:"hljs-string"},"{logIn}")," ",s.xCreateElement(e.span,{class:"hljs-attr"},"class"),"=",s.xCreateElement(e.span,{class:"hljs-string"},'"flex flex-col"'),">"),` 49 `,s.xCreateElement(e.span,{class:"hljs-tag"},"<",s.xCreateElement(e.span,{class:"hljs-name"},"input")," ",s.xCreateElement(e.span,{class:"hljs-attr"},"type"),"=",s.xCreateElement(e.span,{class:"hljs-string"},'"text"')," ",s.xCreateElement(e.span,{class:"hljs-attr"},"name"),"=",s.xCreateElement(e.span,{class:"hljs-string"},'"username"')," ",s.xCreateElement(e.span,{class:"hljs-attr"},"placeholder"),"=",s.xCreateElement(e.span,{class:"hljs-string"},'"User Name"')," ",s.xCreateElement(e.span,{class:"hljs-attr"},"class"),"=",s.xCreateElement(e.span,{class:"hljs-string"},"{cls}")," />"),` 50 `,s.xCreateElement(e.span,{class:"hljs-tag"},"<",s.xCreateElement(e.span,{class:"hljs-name"},"input")," ",s.xCreateElement(e.span,{class:"hljs-attr"},"type"),"=",s.xCreateElement(e.span,{class:"hljs-string"},'"text"')," ",s.xCreateElement(e.span,{class:"hljs-attr"},"name"),"=",s.xCreateElement(e.span,{class:"hljs-string"},'"email"')," ",s.xCreateElement(e.span,{class:"hljs-attr"},"placeholder"),"=",s.xCreateElement(e.span,{class:"hljs-string"},'"Email"')," ",s.xCreateElement(e.span,{class:"hljs-attr"},"class"),"=",s.xCreateElement(e.span,{class:"hljs-string"},"{cls}")," />"),` 51 `,s.xCreateElement(e.span,{class:"hljs-tag"},"<",s.xCreateElement(e.span,{class:"hljs-name"},"Btn")," ",s.xCreateElement(e.span,{class:"hljs-attr"},"type"),"=",s.xCreateElement(e.span,{class:"hljs-string"},'"submit"')," ",s.xCreateElement(e.span,{class:"hljs-attr"},"class"),"=",s.xCreateElement(e.span,{class:"hljs-string"},'"m-2"')," ",s.xCreateElement(e.span,{class:"hljs-attr"},"size"),"=",s.xCreateElement(e.span,{class:"hljs-string"},'"xl"'),">"),` 52 Login 53 `,s.xCreateElement(e.span,{class:"hljs-tag"},"</",s.xCreateElement(e.span,{class:"hljs-name"},"Btn"),">"),` 54 `,s.xCreateElement(e.span,{class:"hljs-tag"},"</",s.xCreateElement(e.span,{class:"hljs-name"},"Form"),">")),` 55 ); 56} 57`)),s.xCreateElement(E),s.xCreateElement(e.h1,null,"That's it!"),s.xCreateElement(e.ul,null,` 58`,s.xCreateElement(e.li,null,"No need to to install any extra dependencies."),` 59`,s.xCreateElement(e.li,null,"No need to learn any new syntax."),` 60`,s.xCreateElement(e.li,null,"No need to learn any new terminology."),` 61`,s.xCreateElement(e.li,null,"No Providers"),` 62`,s.xCreateElement(e.li,null,"No Consumers"),` 63`,s.xCreateElement(e.li,null,"No Reducers"),` 64`,s.xCreateElement(e.li,null,"No Actions"),` 65`,s.xCreateElement(e.li,null,"No Dispatchers"),` 66`,s.xCreateElement(e.li,null,"No connecting state to a component"),` 67`,s.xCreateElement(e.li,null,"No mapping state to props"),` 68`)),` 69`,s.xCreateElement("div",{class:"mdx max-w-3xl bg-red-300 p-4 rounded-lg"},s.xCreateElement(e.h1,null,"Compared to Redux/React"),s.xCreateElement(e.h3,null,"Step 1: Set Up Redux Store"),s.xCreateElement(e.p,null,"First, you need to set up the Redux store. This store will hold the application's state."),s.xCreateElement(e.pre,null,s.xCreateElement(e.code,{class:"hljs language-javascript"},s.xCreateElement(e.span,{class:"hljs-keyword"},"import")," { createStore } ",s.xCreateElement(e.span,{class:"hljs-keyword"},"from")," ",s.xCreateElement(e.span,{class:"hljs-string"},'"redux"'),`; 70`,s.xCreateElement(e.span,{class:"hljs-keyword"},"import")," rootReducer ",s.xCreateElement(e.span,{class:"hljs-keyword"},"from")," ",s.xCreateElement(e.span,{class:"hljs-string"},'"./reducers"'),"; ",s.xCreateElement(e.span,{class:"hljs-comment"},"// We will create this file in the next step"),` 71 72`,s.xCreateElement(e.span,{class:"hljs-keyword"},"const")," store = ",s.xCreateElement(e.span,{class:"hljs-title function_"},"createStore"),`(rootReducer); 73`,s.xCreateElement(e.span,{class:"hljs-keyword"},"export")," ",s.xCreateElement(e.span,{class:"hljs-keyword"},"default"),` store; 74`)),s.xCreateElement(e.h3,null,"Step 2: Create Actions and Reducers"),s.xCreateElement(e.p,null,"Next, define actions and reducers. Actions are payloads of information that send data from your application to your store. Reducers specify how the application's state changes in response to actions."),s.xCreateElement(e.h4,null,"Actions (actions.js)"),s.xCreateElement(e.pre,null,s.xCreateElement(e.code,{class:"hljs language-javascript"},s.xCreateElement(e.span,{class:"hljs-comment"},"// Action Types"),` 75`,s.xCreateElement(e.span,{class:"hljs-keyword"},"export")," ",s.xCreateElement(e.span,{class:"hljs-keyword"},"const")," ",s.xCreateElement(e.span,{class:"hljs-variable constant_"},"LOGIN")," = ",s.xCreateElement(e.span,{class:"hljs-string"},'"LOGIN"'),`; 76`,s.xCreateElement(e.span,{class:"hljs-keyword"},"export")," ",s.xCreateElement(e.span,{class:"hljs-keyword"},"const")," ",s.xCreateElement(e.span,{class:"hljs-variable constant_"},"LOGOUT")," = ",s.xCreateElement(e.span,{class:"hljs-string"},'"LOGOUT"'),`; 77 78`,s.xCreateElement(e.span,{class:"hljs-comment"},"// Action Creators"),` 79`,s.xCreateElement(e.span,{class:"hljs-keyword"},"export")," ",s.xCreateElement(e.span,{class:"hljs-keyword"},"const")," ",s.xCreateElement(e.span,{class:"hljs-title function_"},"logIn")," = (",s.xCreateElement(e.span,{class:"hljs-params"},"userData"),`) => ({ 80 `,s.xCreateElement(e.span,{class:"hljs-attr"},"type"),": ",s.xCreateElement(e.span,{class:"hljs-variable constant_"},"LOGIN"),`, 81 `,s.xCreateElement(e.span,{class:"hljs-attr"},"payload"),`: userData, 82}); 83 84`,s.xCreateElement(e.span,{class:"hljs-keyword"},"export")," ",s.xCreateElement(e.span,{class:"hljs-keyword"},"const")," ",s.xCreateElement(e.span,{class:"hljs-title function_"},"logOut")," = (",s.xCreateElement(e.span,{class:"hljs-params"}),`) => ({ 85 `,s.xCreateElement(e.span,{class:"hljs-attr"},"type"),": ",s.xCreateElement(e.span,{class:"hljs-variable constant_"},"LOGOUT"),`, 86}); 87`)),s.xCreateElement(e.h4,null,"Reducers (reducers.js)"),s.xCreateElement(e.pre,null,s.xCreateElement(e.code,{class:"hljs language-javascript"},s.xCreateElement(e.span,{class:"hljs-keyword"},"import")," { ",s.xCreateElement(e.span,{class:"hljs-variable constant_"},"LOGIN"),", ",s.xCreateElement(e.span,{class:"hljs-variable constant_"},"LOGOUT")," } ",s.xCreateElement(e.span,{class:"hljs-keyword"},"from")," ",s.xCreateElement(e.span,{class:"hljs-string"},'"./actions"'),`; 88 89`,s.xCreateElement(e.span,{class:"hljs-keyword"},"const"),` initialState = { 90 `,s.xCreateElement(e.span,{class:"hljs-attr"},"isLoggedIn"),": ",s.xCreateElement(e.span,{class:"hljs-literal"},"false"),`, 91 `,s.xCreateElement(e.span,{class:"hljs-attr"},"user"),": ",s.xCreateElement(e.span,{class:"hljs-literal"},"null"),`, 92}; 93 94`,s.xCreateElement(e.span,{class:"hljs-keyword"},"const")," ",s.xCreateElement(e.span,{class:"hljs-title function_"},"rootReducer")," = (",s.xCreateElement(e.span,{class:"hljs-params"},"state = initialState, action"),`) => { 95 `,s.xCreateElement(e.span,{class:"hljs-keyword"},"switch")," (action.",s.xCreateElement(e.span,{class:"hljs-property"},"type"),`) { 96 `,s.xCreateElement(e.span,{class:"hljs-keyword"},"case")," ",s.xCreateElement(e.span,{class:"hljs-attr"},"LOGIN"),`: 97 `,s.xCreateElement(e.span,{class:"hljs-keyword"},"return"),` { 98 ...state, 99 `,s.xCreateElement(e.span,{class:"hljs-attr"},"isLoggedIn"),": ",s.xCreateElement(e.span,{class:"hljs-literal"},"true"),`, 100 `,s.xCreateElement(e.span,{class:"hljs-attr"},"user"),": action.",s.xCreateElement(e.span,{class:"hljs-property"},"payload"),`, 101 }; 102 `,s.xCreateElement(e.span,{class:"hljs-keyword"},"case")," ",s.xCreateElement(e.span,{class:"hljs-attr"},"LOGOUT"),`: 103 `,s.xCreateElement(e.span,{class:"hljs-keyword"},"return"),` { 104 ...state, 105 `,s.xCreateElement(e.span,{class:"hljs-attr"},"isLoggedIn"),": ",s.xCreateElement(e.span,{class:"hljs-literal"},"false"),`, 106 `,s.xCreateElement(e.span,{class:"hljs-attr"},"user"),": ",s.xCreateElement(e.span,{class:"hljs-literal"},"null"),`, 107 }; 108 `,s.xCreateElement(e.span,{class:"hljs-attr"},"default"),`: 109 `,s.xCreateElement(e.span,{class:"hljs-keyword"},"return"),` state; 110 } 111}; 112 113`,s.xCreateElement(e.span,{class:"hljs-keyword"},"export")," ",s.xCreateElement(e.span,{class:"hljs-keyword"},"default"),` rootReducer; 114`)),s.xCreateElement(e.h3,null,"Step 3: Provide Redux Store to React"),s.xCreateElement(e.p,null,"Now, you need to provide the Redux store to your React application using the ",s.xCreateElement(e.code,null,"Provider")," component from ",s.xCreateElement(e.code,null,"react-redux"),"."),s.xCreateElement(e.pre,null,s.xCreateElement(e.code,{class:"hljs language-javascript"},s.xCreateElement(e.span,{class:"hljs-keyword"},"import")," ",s.xCreateElement(e.span,{class:"hljs-title class_"},"React")," ",s.xCreateElement(e.span,{class:"hljs-keyword"},"from")," ",s.xCreateElement(e.span,{class:"hljs-string"},'"react"'),`; 115`,s.xCreateElement(e.span,{class:"hljs-keyword"},"import")," ",s.xCreateElement(e.span,{class:"hljs-title class_"},"ReactDOM")," ",s.xCreateElement(e.span,{class:"hljs-keyword"},"from")," ",s.xCreateElement(e.span,{class:"hljs-string"},'"react-dom"'),`; 116`,s.xCreateElement(e.span,{class:"hljs-keyword"},"import")," { ",s.xCreateElement(e.span,{class:"hljs-title class_"},"Provider")," } ",s.xCreateElement(e.span,{class:"hljs-keyword"},"from")," ",s.xCreateElement(e.span,{class:"hljs-string"},'"react-redux"'),`; 117`,s.xCreateElement(e.span,{class:"hljs-keyword"},"import")," store ",s.xCreateElement(e.span,{class:"hljs-keyword"},"from")," ",s.xCreateElement(e.span,{class:"hljs-string"},'"./store"'),"; ",s.xCreateElement(e.span,{class:"hljs-comment"},"// Import the store you created"),` 118`,s.xCreateElement(e.span,{class:"hljs-keyword"},"import")," ",s.xCreateElement(e.span,{class:"hljs-title class_"},"App")," ",s.xCreateElement(e.span,{class:"hljs-keyword"},"from")," ",s.xCreateElement(e.span,{class:"hljs-string"},'"./App"'),"; ",s.xCreateElement(e.span,{class:"hljs-comment"},"// Your main App component"),` 119 120`,s.xCreateElement(e.span,{class:"hljs-title class_"},"ReactDOM"),".",s.xCreateElement(e.span,{class:"hljs-title function_"},"render"),`( 121 `,s.xCreateElement(e.span,{class:"xml"},s.xCreateElement(e.span,{class:"hljs-tag"},"<",s.xCreateElement(e.span,{class:"hljs-name"},"Provider")," ",s.xCreateElement(e.span,{class:"hljs-attr"},"store"),"=",s.xCreateElement(e.span,{class:"hljs-string"},"{store}"),">"),` 122 `,s.xCreateElement(e.span,{class:"hljs-tag"},"<",s.xCreateElement(e.span,{class:"hljs-name"},"App")," />"),` 123 `,s.xCreateElement(e.span,{class:"hljs-tag"},"</",s.xCreateElement(e.span,{class:"hljs-name"},"Provider"),">")),`, 124 `,s.xCreateElement(e.span,{class:"hljs-variable language_"},"document"),".",s.xCreateElement(e.span,{class:"hljs-title function_"},"getElementById"),"(",s.xCreateElement(e.span,{class:"hljs-string"},'"root"'),`), 125); 126`)),s.xCreateElement(e.h3,null,"Step 4: Connect React Components"),s.xCreateElement(e.p,null,"Finally, connect your React components to the Redux store using ",s.xCreateElement(e.code,null,"connect()")," from ",s.xCreateElement(e.code,null,"react-redux"),"."),s.xCreateElement(e.h4,null,"ExampleC
126omponent.jsx"),s.xCreateElement(e.pre,null,s.xCreateElement(e.code,{class:"hljs language-javascript"},s.xCreateElement(e.span,{class:"hljs-keyword"},"import")," ",s.xCreateElement(e.span,{class:"hljs-title class_"},"React")," ",s.xCreateElement(e.span,{class:"hljs-keyword"},"from")," ",s.xCreateElement(e.span,{class:"hljs-string"},'"react"'),`; 127`,s.xCreateElement(e.span,{class:"hljs-keyword"},"import")," { connect } ",s.xCreateElement(e.span,{class:"hljs-keyword"},"from")," ",s.xCreateElement(e.span,{class:"hljs-string"},'"react-redux"'),`; 128`,s.xCreateElement(e.span,{class:"hljs-keyword"},"import")," { logIn, logOut } ",s.xCreateElement(e.span,{class:"hljs-keyword"},"from")," ",s.xCreateElement(e.span,{class:"hljs-string"},'"./actions"'),`; 129 130`,s.xCreateElement(e.span,{class:"hljs-keyword"},"const")," ",s.xCreateElement(e.span,{class:"hljs-title function_"},"ExampleComponent")," = (",s.xCreateElement(e.span,{class:"hljs-params"},"{ isLoggedIn, user, logIn, logOut }"),`) => { 131 `,s.xCreateElement(e.span,{class:"hljs-keyword"},"const")," ",s.xCreateElement(e.span,{class:"hljs-title function_"},"handleLogin")," = (",s.xCreateElement(e.span,{class:"hljs-params"}),`) => { 132 `,s.xCreateElement(e.span,{class:"hljs-comment"},"// Example login logic"),` 133 `,s.xCreateElement(e.span,{class:"hljs-keyword"},"const")," userData = { ",s.xCreateElement(e.span,{class:"hljs-attr"},"name"),": ",s.xCreateElement(e.span,{class:"hljs-string"},'"John Doe"'),` }; 134 `,s.xCreateElement(e.span,{class:"hljs-title function_"},"logIn"),`(userData); 135 }; 136 137 `,s.xCreateElement(e.span,{class:"hljs-keyword"},"const")," ",s.xCreateElement(e.span,{class:"hljs-title function_"},"handleLogout")," = (",s.xCreateElement(e.span,{class:"hljs-params"}),`) => { 138 `,s.xCreateElement(e.span,{class:"hljs-title function_"},"logOut"),`(); 139 }; 140 141 `,s.xCreateElement(e.span,{class:"hljs-keyword"},"return"),` ( 142 `,s.xCreateElement(e.span,{class:"xml"},s.xCreateElement(e.span,{class:"hljs-tag"},"<",s.xCreateElement(e.span,{class:"hljs-name"},"div"),">"),` 143 {isLoggedIn ? ( 144 `,s.xCreateElement(e.span,{class:"hljs-tag"},"<",s.xCreateElement(e.span,{class:"hljs-name"},"div"),">"),` 145 `,s.xCreateElement(e.span,{class:"hljs-tag"},"<",s.xCreateElement(e.span,{class:"hljs-name"},"p"),">"),"Welcome, {user.name}",s.xCreateElement(e.span,{class:"hljs-tag"},"</",s.xCreateElement(e.span,{class:"hljs-name"},"p"),">"),` 146 `,s.xCreateElement(e.span,{class:"hljs-tag"},"<",s.xCreateElement(e.span,{class:"hljs-name"},"button")," ",s.xCreateElement(e.span,{class:"hljs-attr"},"onClick"),"=",s.xCreateElement(e.span,{class:"hljs-string"},"{handleLogout}"),">"),"Logout",s.xCreateElement(e.span,{class:"hljs-tag"},"</",s.xCreateElement(e.span,{class:"hljs-name"},"button"),">"),` 147 `,s.xCreateElement(e.span,{class:"hljs-tag"},"</",s.xCreateElement(e.span,{class:"hljs-name"},"div"),">"),` 148 ) : ( 149 `,s.xCreateElement(e.span,{class:"hljs-tag"},"<",s.xCreateElement(e.span,{class:"hljs-name"},"button")," ",s.xCreateElement(e.span,{class:"hljs-attr"},"onClick"),"=",s.xCreateElement(e.span,{class:"hljs-string"},"{handleLogin}"),">"),"Login",s.xCreateElement(e.span,{class:"hljs-tag"},"</",s.xCreateElement(e.span,{class:"hljs-name"},"button"),">"),` 150 )} 151 `,s.xCreateElement(e.span,{class:"hljs-tag"},"</",s.xCreateElement(e.span,{class:"hljs-name"},"div"),">")),` 152 ); 153}; 154 155`,s.xCreateElement(e.span,{class:"hljs-keyword"},"const")," ",s.xCreateElement(e.span,{class:"hljs-title function_"},"mapStateToProps")," = (",s.xCreateElement(e.span,{class:"hljs-params"},"state"),`) => ({ 156 `,s.xCreateElement(e.span,{class:"hljs-attr"},"isLoggedIn"),": state.",s.xCreateElement(e.span,{class:"hljs-property"},"isLoggedIn"),`, 157 `,s.xCreateElement(e.span,{class:"hljs-attr"},"user"),": state.",s.xCreateElement(e.span,{class:"hljs-property"},"user"),`, 158}); 159 160`,s.xCreateElement(e.span,{class:"hljs-keyword"},"const"),` mapDispatchToProps = { 161 logIn, 162 logOut, 163}; 164 165`,s.xCreateElement(e.span,{class:"hljs-keyword"},"export")," ",s.xCreateElement(e.span,{class:"hljs-keyword"},"default")," ",s.xCreateElement(e.span,{class:"hljs-title function_"},"connect"),"(mapStateToProps, mapDispatchToProps)(",s.xCreateElement(e.span,{class:"hljs-title class_"}
165,"ExampleComponent"),`); 166`))),` 167`,s.xCreateElement(e.pre,null,s.xCreateElement(e.code)))}function f(a={}){const{wrapper:e}=a.components||{};return e?s.xCreateElement(e,{...a},s.xCreateElement(r,{...a})):r(a)}export{w as Layout,f as default,y as fm};
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.