1<!doctype html> 2<html class="h-full bg-white" lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta 6 name="description" 7 content="Rezact: Intuitive Reactivity, Simplified State. Embrace a modern UI framework that encourages direct data mutations, offers module-level reactivity, and simplifies component design. With Rezact, you get the power of reactivity without the boilerplate. Dive into a seamless development experience tailored for today's web." 8 /> 9 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 10 11 <meta name="twitter:card" content="summary_large_image" /> 12 <meta name="twitter:site" content="@rezactio" /> 13 <meta name="twitter:title" content="Rezact" /> 14 <meta 15 name="twitter:description" 16 content="Because its time for a better client side rendered framework" 17 /> 18 <meta 19 name="twitter:image" 20 content="https://rezact.io/rezact-site-preview.png" 21 /> 22 23 <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" /> 24 <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" /> 25 <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" /> 26 <link rel="manifest" href="/site.webmanifest" /> 27 <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" /> 28 <meta name="msapplication-TileColor" content="#2d89ef" /> 29 <meta name="theme-color" content="#ffffff" /> 30 <title>Rezact</title> 31 <link rel="modulepreload" href="/assets/500_Stores-EpiMIOPX.js" /> 32<link rel="modulepreload" href="/assets/mdx-LEb1kaIk.js" /> 33<link rel="modulepreload" href="/assets/Buttons-E-yT_r7C.js" /> 34<link rel="modulepreload" href="/assets/Form-cLix5-9l.js" /> 35 36
36<script type="module" crossorigin src="/assets/main-Ex-1LHMJ.js"></script>
36 37 <link rel="stylesheet" crossorigin href="/assets/main-4Ers5TFM.css"> 38 </head> 39 40 <body class="h-full"> 41 <div id="app"><div><div class="relative z-50 hidden" role="dialog" aria-modal="true"><div class="fixed inset-0 bg-gray-900/80 opacity-0 transition-opacity duration-300 ease-linear"></div><div class="fixed inset-0 flex"><div class=" relative mr-16 flex w-full max-w-xs flex-1 -translate-x-full transition duration-300 ease-in-out"><div class=" absolute left-full top-0 flex w-16 justify-center pt-5 opacity-0 transition duration-300 ease-in-out"><button type="button" class="-m-2.5 p-2.5"><span class="sr-only">Close sidebar</span><svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg></button></div><div class="z-10 flex grow flex-col gap-y-5 overflow-y-auto bg-gray-900 px-6 pb-4 ring-1 ring-white/10"><a href="/" class="flex h-16 shrink-0 items-center text-white"><img class="h-8 w-auto" src="/rezact-logo.svg" alt="Rezact Logo">Rezact</a><nav class="flex flex-1 flex-col"><ul role="list" class="flex flex-1 flex-col gap-y-7"><li><ul role="list" class="-mx-2 space-y-1"><li><a href="/docs" class="group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-400 hover:bg-gray-800">Intro</a></li><li><a href="/docs/getting-started" class="group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-400 hover:bg-gray-800">Getting Started</a></li><li><a href="/docs/signals" class="group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-400 hover:bg-gray-800">Signals</a></li><li><a href="/docs/effects" class="group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-400 hover:bg-gray-800">Effects</a></li><li><a href="/docs/stores" class="group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-white bg-gray-800">Stores</a></li><li><a href="/docs/gotchas" class="group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-400 hover:bg-gray-800">Gotchas</a></li></ul></li><li class="mt-auto"><a href="https://github.com/rezact/rezact" class="group -mx-2 flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-400 hover:bg-gray-800 hover:text-white"><svg class="h-6 w-6 shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.026 2c-5.509 0-9.974 4.465-9.974 9.974 0 4.406 2.857 8.145 6.821 9.465.499.09.679-.217.679-.481 0-.237-.008-.865-.011-1.696-2.775.602-3.361-1.338-3.361-1.338-.452-1.152-1.107-1.459-1.107-1.459-.905-.619.069-.605.069-.605 1.002.07 1.527 1.028 1.527 1.028.89 1.524 2.336 1.084 2.902.829.091-.645.351-1.085.635-1.334-2.214-.251-4.542-1.107-4.542-4.93 0-1.087.389-1.979 1.024-2.675-.101-.253-.446-1.268.099-2.64 0 0 .837-.269 2.742 1.021a9.582 9.582 0 0 1 2.496-.336 9.554 9.554 0 0 1 2.496.336c1.906-1.291 2.742-1.021 2.742-1.021.545 1.372.203 2.387.099 2.64.64.696 1.024 1.587 1.024 2.675 0 3.833-2.33 4.675-4.552 4.922.355.308.675.916.675 1.846 0 1.334-.012 2.41-.012 2.737 0 .267.178.577.687.479C19.146 20.115 22 16.379 22 11.974 22 6.465 17.535 2 12.026 2z"></path></svg>GitHub</a></li></ul></nav></div></div></div></div><div id="test" class="hidden lg:fixed lg:inset-y-0 lg:z-40 lg:flex lg:w-72 lg:flex-col"><div class="flex grow flex-col gap-y-5 overflow-y-auto bg-gray-900 px-6 pb-4"><a href="/" class="flex h-16 shrink-0 items-center text-white"><img class="h-8 w-auto" src="/rezact-logo.svg" alt="Rezact Logo">Rezact</a><nav class="flex flex-1 flex-col"><ul role="list" class="flex flex-1 flex-col gap-y-7"><li><ul role="list" class="-mx-2 space-y-1"><li><a href="/docs" class="group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-400 hover:bg-gray-800">Intro</a></li><li><a href="/docs/getting-started" class="group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-400 hover:bg-gray-800">Getting Started</a></li><li><a href="/docs/signals" class="group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-400 hover:bg-gray-800">Signals</a></li><li><a href="/docs/effects" class="group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-400 hover:bg-gray-800">Effects</a></li><li><a href="/docs/stores" class="group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-white bg-gray-800">Stores</a></li><li><a href="/docs/gotchas" class="group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-400 hover:bg-gray-800">Gotchas</a></li></ul></li><li class="mt-auto"><a href="https://github.com/rezact/rezact" class="group -mx-2 flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-400 hover:bg-gray-800 hover:text-white"><svg class="h-6 w-6 shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.026 2c-5.509 0-9.974 4.465-9.974 9.974 0 4.406 2.857 8.145 6.821 9.465.499.09.679-.217.679-.481 0-.237-.008-.865-.011-1.696-2.775.602-3.361-1.338-3.361-1.338-.452-1.152-1.107-1.459-1.107-1.459-.905-.619.069-.605.069-.605 1.002.07 1.527 1.028 1.527 1.028.89 1.524 2.336 1.084 2.902.829.091-.645.351-1.085.635-1.334-2.214-.251-4.542-1.107-4.542-4.93 0-1.087.389-1.979 1.024-2.675-.101-.253-.446-1.268.099-2.64 0 0 .837-.269 2.742 1.021a9.582 9.582 0 0 1 2.496-.336 9.554 9.554 0 0 1 2.496.336c1.906-1.291 2.742-1.021 2.742-1.021.545 1.372.203 2.387.
41099 2.64.64.696 1.024 1.587 1.024 2.675 0 3.833-2.33 4.675-4.552 4.922.355.308.675.916.675 1.846 0 1.334-.012 2.41-.012 2.737 0 .267.178.577.687.479C19.146 20.115 22 16.379 22 11.974 22 6.465 17.535 2 12.026 2z"></path></svg>GitHub</a></li></ul></nav></div></div><div class="lg:pl-72"><div class="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 border-b border-gray-200 bg-white px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:px-8"><button type="button" class="-m-2.5 p-2.5 text-gray-700 lg:hidden"><span class="sr-only">Open sidebar</span><img class="h-8 w-auto" src="/rezact-logo.svg" alt="Rezact Logo"></button><div class="h-6 w-px bg-gray-900/10 lg:hidden" aria-hidden="true"></div><div class="flex flex-1 gap-x-4 self-stretch lg:gap-x-6"><div class="relative flex flex-1"></div><div class="flex items-center gap-x-4 lg:gap-x-6"></div></div></div><main class="py-10"><div class="px-4 sm:px-6 lg:px-8"><!--start map--><div class="mdx max-w-3xl mb-48"><h1>Stores</h1><h3>Step 1: Setup Rezact Store</h3><pre><code class="hljs language-javascript"><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> <span class="hljs-attr">userStore</span>: any = { 42 <span class="hljs-attr">$isLoggedIn</span>: <span class="hljs-literal">false</span>, 43 <span class="hljs-attr">$userName</span>: <span class="hljs-string">""</span>, 44 <span class="hljs-attr">$email</span>: <span class="hljs-string">""</span>, 45}; 46 47<span class="hljs-keyword">export</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">logIn</span>(<span class="hljs-params">data</span>) { 48 userStore.<span class="hljs-property">$isLoggedIn</span> = <span class="hljs-literal">true</span>; 49 userStore.<span class="hljs-property">$userName</span> = data.<span class="hljs-property">username</span>; 50 userStore.<span class="hljs-property">$email</span> = data.<span class="hljs-property">email</span>; 51} 52 53<span class="hljs-keyword">export</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">logOut</span>(<span class="hljs-params"></span>) { 54 userStore.<span class="hljs-property">$isLoggedIn</span> = <span class="hljs-literal">false</span>; 55 userStore.<span class="hljs-property">$userName</span> = <span class="hljs-string">""</span>; 56 userStore.<span class="hljs-property">$email</span> = <span class="hljs-string">""</span>; 57} 58</code></pre><h3>Step 2: Use the Store</h3><pre><code class="hljs language-jsx"><span class="hljs-keyword">import</span> { logIn, logOut, userStore } <span class="hljs-keyword">from</span> <span class="hljs-string">"src/lib/userStore"</span>; 59<span class="hljs-keyword">import</span> { <span class="hljs-title class_">Btn</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">"./Buttons"</span>; 60<span class="hljs-keyword">import</span> { <span class="hljs-title class_">Form</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">"./Form"</span>; 61 62<span class="hljs-keyword">export</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">UserStore</span>(<span class="hljs-params"></span>) { 63 <span class="hljs-keyword">const</span> { $isLoggedIn } = userStore; 64 65 <span class="hljs-keyword">return</span> ( 66 <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m-4 rounded-lg bg-slate-300 p-8 drop-shadow-2xl"</span>></span> 67 {$isLoggedIn ? <span class="hljs-tag"><<span class="hljs-name">UserProfile</span> /></span> : <span class="hljs-tag"><<span class="hljs-name">LoginForm</span> /></span>} 68 <span class="hljs-tag"></<span class="hljs-name">div</span>></span></span> 69 ); 70} 71 72<span class="hljs-keyword">function</span> <span class="hljs-title function_">UserProfile</span>(<span class="hljs-params"></span>) { 73 <span class="hljs-keyword">const</span> { $userName, $email } = userStore; 74 75 <span class="hljs-keyword">return</span> ( 76 <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span>></span> 77 <span class="hljs-tag"><<span class="hljs-name">p</span>></span> 78 Welcome, {$userName} {$email}
79 <span class="hljs-tag"></<span class="hljs-name">p</span>></span> 80 <span class="hljs-tag"><<span class="hljs-name">Btn</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{logOut}</span>></span>Logout<span class="hljs-tag"></<span class="hljs-name">Btn</span>></span> 81 <span class="hljs-tag"></<span class="hljs-name">div</span>></span></span> 82 ); 83} 84 85<span class="hljs-keyword">function</span> <span class="hljs-title function_">LoginForm</span>(<span class="hljs-params"></span>) { 86 <span class="hljs-keyword">const</span> cls = <span class="hljs-string">"rounded p-2 m-2"</span>; 87 <span class="hljs-keyword">return</span> ( 88 <span class="xml"><span class="hljs-tag"><<span class="hljs-name">Form</span> <span class="hljs-attr">onSubmit</span>=<span class="hljs-string">{logIn}</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex flex-col"</span>></span> 89 <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"username"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"User Name"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">{cls}</span> /></span> 90 <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Email"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">{cls}</span> /></span> 91 <span class="hljs-tag"><<span class="hljs-name">Btn</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m-2"</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"xl"</span>></span> 92 Login 93 <span class="hljs-tag"></<span class="hljs-name">Btn</span>></span> 94 <span class="hljs-tag"></<span class="hljs-name">Form</span>></span></span> 95 ); 96} 97</code></pre><div class="m-4 rounded-lg bg-slate-300 p-8 drop-shadow-2xl"><form class="flex flex-col"><input type="text" name="username" placeholder="User Name" class="rounded p-2 m-2"><input type="text" name="email" placeholder="Email" class="rounded p-2 m-2"><button type="submit" class="rounded-md px-3.5 py-2.5 text-sm bg-indigo-600 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 rz-btn m-2">Login</button></form></div><h1>That's it!</h1><ul> 98<li>No need to to install any extra dependencies.</li> 99<li>No need to learn any new syntax.</li> 100<li>No need to learn any new terminology.</li> 101<li>No Providers</li> 102<li>No Consumers</li> 103<li>No Reducers</li> 104<li>No Actions</li> 105<li>No Dispatchers</li> 106<li>No connecting state to a component</li> 107<li>No mapping state to props</li> 108</ul></div> 109<div class="mdx max-w-3xl bg-red-300 p-4 rounded-lg"><h1>Compared to Redux/React</h1><h3>Step 1: Set Up Redux Store</h3><p>First, you need to set up the Redux store. This store will hold the application's state.</p><pre><code class="hljs language-javascript"><span class="hljs-keyword">import</span> { createStore } <span class="hljs-keyword">from</span> <span class="hljs-string">"redux"</span>; 110<span class="hljs-keyword">import</span> rootReducer <span class="hljs-keyword">from</span> <span class="hljs-string">"./reducers"</span>; <span class="hljs-comment">// We will create this file in the next step</span> 111 112<span class="hljs-keyword">const</span> store = <span class="hljs-title function_">createStore</span>(rootReducer); 113<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> store; 114</code></pre><h3>Step 2: Create Actions and Reducers</h3><p>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.</p><h4>Actions (actions.js)</h4><pre><code class="hljs language-javascript"><span class="hljs-comment">// Action Types</span> 115<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> <span class="hljs-variable constant_">LOGIN</span> = <span class="hljs-string">"LOGIN"</span>; 116<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> <span class="hljs-variable constant_">LOGOUT</span> = <span class="hljs-string">"LOGOUT"</span>; 117 118<span class="hljs-comment">// Action Creators</span> 119<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> <span class="hljs-title function_">logIn</span> = (<span class="hljs-params">userData</span>) => ({ 120 <span class="hljs-attr">type</span>: <span class="hljs-variable constant_">LOGIN</span>, 121 <span class="hljs-attr">payload</span>: userData, 122}); 123 124<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> <span class="hljs-title function_">logOut</span> = (<span class="hljs-params"></span>) => ({ 125 <span class="hljs-attr">type</span>: <span class="hljs-variable constant_">LOGOUT</span>, 126}); 127</code></pre><h4>Reducers (reducers.js)</h4><pre><code class="hljs language-javascript"><span class="hljs-keyword">
127import</span> { <span class="hljs-variable constant_">LOGIN</span>, <span class="hljs-variable constant_">LOGOUT</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">"./actions"</span>; 128 129<span class="hljs-keyword">const</span> initialState = { 130 <span class="hljs-attr">isLoggedIn</span>: <span class="hljs-literal">false</span>, 131 <span class="hljs-attr">user</span>: <span class="hljs-literal">null</span>, 132}; 133 134<span class="hljs-keyword">const</span> <span class="hljs-title function_">rootReducer</span> = (<span class="hljs-params">state = initialState, action</span>) => { 135 <span class="hljs-keyword">switch</span> (action.<span class="hljs-property">type</span>) { 136 <span class="hljs-keyword">case</span> <span class="hljs-attr">LOGIN</span>: 137 <span class="hljs-keyword">return</span> { 138 ...state, 139 <span class="hljs-attr">isLoggedIn</span>: <span class="hljs-literal">true</span>, 140 <span class="hljs-attr">user</span>: action.<span class="hljs-property">payload</span>, 141 }; 142 <span class="hljs-keyword">case</span> <span class="hljs-attr">LOGOUT</span>: 143 <span class="hljs-keyword">return</span> { 144 ...state, 145 <span class="hljs-attr">isLoggedIn</span>: <span class="hljs-literal">false</span>, 146 <span class="hljs-attr">user</span>: <span class="hljs-literal">null</span>, 147 }; 148 <span class="hljs-attr">default</span>: 149 <span class="hljs-keyword">return</span> state; 150 } 151}; 152 153<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> rootReducer; 154</code></pre><h3>Step 3: Provide Redux Store to React</h3><p>Now, you need to provide the Redux store to your React application using the <code>Provider</code> component from <code>react-redux</code>.</p><pre><code class="hljs language-javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span> <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>; 155<span class="hljs-keyword">import</span> <span class="hljs-title class_">ReactDOM</span> <span class="hljs-keyword">from</span> <span class="hljs-string">"react-dom"</span>; 156<span class="hljs-keyword">import</span> { <span class="hljs-title class_">Provider</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">"react-redux"</span>; 157<span class="hljs-keyword">import</span> store <span class="hljs-keyword">from</span> <span class="hljs-string">"./store"</span>; <span class="hljs-comment">// Import the store you created</span> 158<span class="hljs-keyword">import</span> <span class="hljs-title class_">App</span> <span class="hljs-keyword">from</span> <span class="hljs-string">"./App"</span>; <span class="hljs-comment">// Your main App component</span> 159 160<span class="hljs-title class_">ReactDOM</span>.<span class="hljs-title function_">render</span>( 161 <span class="xml"><span class="hljs-tag"><<span class="hljs-name">Provider</span> <span class="hljs-attr">store</span>=<span class="hljs-string">{store}</span>></span> 162 <span class="hljs-tag"><<span class="hljs-name">App</span> /></span> 163 <span class="hljs-tag"></<span class="hljs-name">Provider</span>></span></span>, 164 <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">"root"</span>), 165); 166</code></pre><h3>Step 4: Connect React Components</h3><p>Finally, connect your React components to the Redux store using <code>connect()</code> from <code>react-redux</code>.</p><h4>ExampleComponent.jsx</h4><pre><code class="hljs language-javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span> <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>; 167<span class="hljs-keyword">import</span> { connect } <span class="hljs-keyword">from</span> <span class="hljs-string">"react-redux"</span>; 168<span class="hljs-keyword">import</span> { logIn, logOut } <span class="hljs-keyword">from</span> <span class="hljs-string">"./actions"</span>; 169 170<span class="hljs-keyword">const</span> <span class="hljs-title function_">ExampleComponent</span> = (<span class="hljs-params">{ isLoggedIn, user, logIn, logOut }</span>) => { 171 <span class="hljs-keyword">const</span> <span class="hljs-title function_">handleLogin</span> = (<span class="hljs-params"></span>) => { 172 <span class="hljs-comment">// Example login logic</span> 173 <span class="hljs-keyword">const</span> userData = { <span class="hljs-attr">name</span>: <span class="hljs-string">"John Doe"</span> }; 174 <span class="hljs-title function_">logIn</span>(userData); 175 }; 176 177 <span class="hljs-keyword">const</span> <span class="hljs-title function_">handleLogout</span> = (<span class="hljs-params"></span>) => { 178 <span class="hljs-title function_">logOut</span>(); 179 }; 180 181 <span class="hljs-keyword">return</span> ( 182 <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span>></span> 183 {isLoggedIn ? (
184 <span class="hljs-tag"><<span class="hljs-name">div</span>></span> 185 <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Welcome, {user.name}<span class="hljs-tag"></<span class="hljs-name">p</span>></span> 186 <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{handleLogout}</span>></span>Logout<span class="hljs-tag"></<span class="hljs-name">button</span>></span> 187 <span class="hljs-tag"></<span class="hljs-name">div</span>></span> 188 ) : ( 189 <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{handleLogin}</span>></span>Login<span class="hljs-tag"></<span class="hljs-name">button</span>></span> 190 )} 191 <span class="hljs-tag"></<span class="hljs-name">div</span>></span></span> 192 ); 193}; 194 195<span class="hljs-keyword">const</span> <span class="hljs-title function_">mapStateToProps</span> = (<span class="hljs-params">state</span>) => ({ 196 <span class="hljs-attr">isLoggedIn</span>: state.<span class="hljs-property">isLoggedIn</span>, 197 <span class="hljs-attr">user</span>: state.<span class="hljs-property">user</span>, 198}); 199 200<span class="hljs-keyword">const</span> mapDispatchToProps = { 201 logIn, 202 logOut, 203}; 204 205<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title function_">connect</span>(mapStateToProps, mapDispatchToProps)(<span class="hljs-title class_">ExampleComponent</span>); 206</code></pre></div> 207<pre><code></code></pre><!--end map--></div></main></div></div><!--signal--></div> 208
208<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"524e4b6a84534c9684ebc910662afa01","r":1,"spa":2}' crossorigin="anonymous"></script>
208 209</body> 210</html>
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.