{"id":4401,"date":"2023-06-01T15:38:59","date_gmt":"2023-06-01T08:38:59","guid":{"rendered":"https:\/\/www.bagi2info.com\/?p=4401"},"modified":"2023-06-26T12:35:34","modified_gmt":"2023-06-26T05:35:34","slug":"react-native-mengenal-zustand-state-management-sederhana","status":"publish","type":"post","link":"https:\/\/www.bagi2info.com\/en\/react-native-get-to-know-simple-zustand-state-management\/","title":{"rendered":"React Native : Get to know Simple Zustand State Management"},"content":{"rendered":"\r\n<p>If you&#8217;ve never heard of Zustand but still wake up from night terrors with Redux as the main baddie, you should absolutely make friends with this jamming bear. It takes only THREE MINUTES to set up, is flexible and unopinionated, and is arguably the simplest to understand and use. So bear with me while I demonstrate how to utilize Zustand today.<\/p>\r\n\r\n\r\n\r\n<p><\/p>\r\n\r\n\r\n\r\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\r\n\r\n\r\n\r\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.bagi2info.com\/en\/react-native-get-to-know-simple-zustand-state-management\/#What_is_an_application_state\" >What is an application state?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.bagi2info.com\/en\/react-native-get-to-know-simple-zustand-state-management\/#Local_State\" >Local State<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.bagi2info.com\/en\/react-native-get-to-know-simple-zustand-state-management\/#Global_State\" >Global State<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.bagi2info.com\/en\/react-native-get-to-know-simple-zustand-state-management\/#What_is_Zustand\" >What is Zustand?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.bagi2info.com\/en\/react-native-get-to-know-simple-zustand-state-management\/#Storejs\" >Store.js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.bagi2info.com\/en\/react-native-get-to-know-simple-zustand-state-management\/#Appjs\" >App.js<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_is_an_application_state\"><\/span>What is an application state?<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n<p><br>State is a piece of information that our software stores to reflect changes that take place while it is operating and during user interactions. Let&#8217;s look at what can really be kept in a state instead of giving another dull Wikipedia definition:<\/p>\r\n\r\n\r\n\r\n\r\n<p>1. information about the logged-in user, <\/p>\r\n\r\n\r\n\r\n<p>2. a list of products retrieved from the backend, <\/p>\r\n\r\n\r\n\r\n<p>3. a flag indicating whether the navigation bar is open or closed, <\/p>\r\n\r\n\r\n\r\n<p>4. and the total cost of all the items in the user&#8217;s shopping cart.<\/p>\r\n\r\n\r\n\r\n<p>In React apps, we separate states into two categories.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Local_State\"><\/span>Local State<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n\r\n\r\n\r\n<p>State that is inextricably linked with a component that modifies the UI look. This state does not have to be shared by all components. A excellent example is flagging the navbar state from the list above. You don&#8217;t have to worry about sharing this information because the navigation bar is probably the only component that cares about it.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Global_State\"><\/span>Global State<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n\r\n\r\n\r\n<p>This state, on the other hand, contains data that may be used by numerous hierarchical components in your program.<\/p>\r\n\r\n\r\n\r\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_is_Zustand\"><\/span>What is Zustand?<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n<p>Zustand is a state management created by designers Jotai and React-spring.<\/p>\r\n\r\n\r\n\r\n<p>Zustand state management which is small, fast, and scalable using simplified flux principles. Have a convenient API based on hooks, not boilerplate or opinions.<\/p>\r\n\r\n\r\n\r\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Storejs\"><\/span>Store.js<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n<pre title=\"store.js\" class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx line-numbers\">import create from 'zustand';\r\n\r\nconst initialState = {\r\n  firstName: 'John',\r\n  lastName: 'Snow',\r\n};\r\n\/\/ Log every time state is changed\r\nconst log = (config) => (set, get, api) =>\r\n  config(\r\n    (...args) => {\r\n      console.log('  applying', args);\r\n      set(...args);\r\n      console.log('  new state', get());\r\n    },\r\n    get,\r\n    api\r\n  );\r\n\r\nconst useStore = create(\r\n  log((set, get) => ({\r\n    ...initialState,\r\n\r\n    setFirstName: (firstName) => set({ firstName }),\r\n    setLastName: (lastName) => set({ lastName }),\r\n\r\n    getLastName: () => {\r\n      const name = get().firstName;\r\n      console.log('name', name);\r\n    },\r\n\r\n    reset: () => {\r\n      set(initialState);\r\n    },\r\n  }))\r\n);\r\n\r\nexport default useStore;\r\n\r\n\/\/ const firstName = useStore((state) => state.firstName);\r\n\/\/ const lastName = useStore((state) => state.lastName);\r\n\/\/ const setFirstName = useStore((state) => state.setFirstName);\r\n\/\/ const setLastName = useStore((state) => state.setLastName);\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Appjs\"><\/span>App.js<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n<pre title=\"App.js\" class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx line-numbers\">import * as React from 'react';\r\nimport { Text, View, StyleSheet, TextInput } from 'react-native';\r\nimport Constants from 'expo-constants';\r\n\r\n\/\/ or any pure javascript modules available in npm\r\nimport { Card } from 'react-native-paper';\r\nimport useStore from '.\/store';\r\n\r\nexport default function App() {\r\n  const firstName = useStore((state) => state.firstName);\r\n  const lastName = useStore((state) => state.lastName);\r\n  const setFirstName = useStore((state) => state.setFirstName);\r\n  const setLastName = useStore((state) => state.setLastName);\r\n\r\n  return (\r\n    &lt;View style={styles.container}>\r\n      &lt;Text style={styles.title}>React Native Zustand Example&lt;\/Text>\r\n      &lt;Card style={styles.card}>\r\n        &lt;View style={styles.form}>\r\n          &lt;Text>Name&lt;\/Text>\r\n          &lt;TextInput\r\n            style={styles.input}\r\n            onChangeText={(val) => setFirstName(val)}\r\n            value={firstName}\r\n          \/>\r\n          &lt;TextInput\r\n            style={styles.input}\r\n            onChangeText={(val) => setLastName(val)}\r\n            value={lastName}\r\n          \/>\r\n        &lt;\/View>\r\n\r\n        &lt;Text style={styles.result}>{`Result : ${firstName} ${lastName}`}&lt;\/Text>\r\n      &lt;\/Card>\r\n    &lt;\/View>\r\n  );\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n  container: {\r\n    flex: 1,\r\n    justifyContent: 'center',\r\n    paddingTop: Constants.statusBarHeight,\r\n    backgroundColor: '#ecf0f1',\r\n    padding: 8,\r\n  },\r\n\r\n  title: {\r\n    margin: 24,\r\n    marginTop: 0,\r\n    fontSize: 14,\r\n    fontWeight: 'bold',\r\n    textAlign: 'center',\r\n  },\r\n  card: {\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    padding: 24,\r\n  },\r\n  form: {\r\n    flexDirection: 'row',\r\n    alignItems: 'center',\r\n  },\r\n  result: {\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    paddingVertical: 24,\r\n  },\r\n  input: {\r\n    height: 40,\r\n    margin: 5,\r\n    borderWidth: 1,\r\n    padding: 10,\r\n    width: 100,\r\n  },\r\n});\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n<p>Snack Link : <a href=\"https:\/\/snack.expo.dev\/@rudiahmad\/react-native-zustand-sample\" target=\"_blank\" rel=\"noopener\" title=\"\">https:\/\/snack.expo.dev\/@rudiahmad\/react-native-zustand-sample<\/a><\/p>\r\n\r\n\r\n\r\n<p><\/p>\r\n","protected":false},"excerpt":{"rendered":"<p>If you&#8217;ve never heard of Zustand but still wake up from night terrors with Redux as the main baddie, you should absolutely make friends with this jamming bear. It takes only THREE MINUTES to&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":4409,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,173],"tags":[],"class_list":["post-4401","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-komputer","category-react-native"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/4401","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/comments?post=4401"}],"version-history":[{"count":9,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/4401\/revisions"}],"predecessor-version":[{"id":4447,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/4401\/revisions\/4447"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/media\/4409"}],"wp:attachment":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/media?parent=4401"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/categories?post=4401"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/tags?post=4401"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}