Zustand In Depth

17. Zustand/1. Install Zustand/text.txt

@@ -0,0 +1 @@
+npm i zustand

17. Zustand/2. Accessing State/src/app/Index.tsx

@@ -0,0 +1,14 @@
+import { View, Text } from "react-native";
+import { useCounterStore } from "../store/store";
+
+const Index = () => {
+  const count = useCounterStore((state) => state.count);
+
+  return (
+    <View>
+      <Text style={{ fontSize: 24 }}>Count: {count}</Text>
+    </View>
+  );
+};
+
+export default Index;

17. Zustand/2. Accessing State/src/store/store.ts

@@ -0,0 +1,9 @@
+import { create } from "zustand";
+
+type CounterStore = {
+  count: number;
+};
+
+export const useCounterStore = create<CounterStore>(() => ({
+  count: 0,
+}));

17. Zustand/3. Changing State/src/app/Index.tsx

@@ -0,0 +1,18 @@
+import { View, Text, Button } from "react-native";
+import { useCounterStore } from "../store/store";
+
+const Index = () => {
+  const count = useCounterStore((state) => state.count);
+  const increment = useCounterStore((state) => state.increment);
+  const decrement = useCounterStore((state) => state.decrement);
+
+  return (
+    <View>
+      <Text style={{ fontSize: 24 }}>Count: {count}</Text>
+      <Button onPress={increment} title={"Increment"} />
+      <Button onPress={decrement} title={"Decrement"} />
+    </View>
+  );
+};
+
+export default Index;

17. Zustand/3. Changing State/src/store/store.ts

@@ -0,0 +1,13 @@
+import { create } from "zustand";
+
+type CounterStore = {
+  count: number;
+  increment: () => void;
+  decrement: () => void;
+};
+
+export const useCounterStore = create<CounterStore>((set) => ({
+  count: 0,
+  increment: () => set((state) => ({ count: state.count + 1 })),
+  decrement: () => set((state) => ({ count: state.count - 1 })),
+}));

17. Zustand/4. Access State In Other Components/src/app/Index.tsx

@@ -0,0 +1,16 @@
+import { View, Text, Button } from "react-native";
+import { useCounterStore } from "../store/store";
+import ChangeUI from "../components/ChangeUI";
+
+const Index = () => {
+  const count = useCounterStore((state) => state.count);
+
+  return (
+    <View>
+      <Text style={{ fontSize: 24 }}>Count: {count}</Text>
+      <ChangeUI />
+    </View>
+  );
+};
+
+export default Index;

17. Zustand/4. Access State In Other Components/src/components/ChangeUI.tsx

@@ -0,0 +1,15 @@
+import { View, Text, Button } from "react-native";
+import { useCounterStore } from "../store/store";
+
+const ChangeUI = () => {
+  const increment = useCounterStore((state) => state.increment);
+  const decrement = useCounterStore((state) => state.decrement);
+
+  return (
+    <View>
+      <Button onPress={increment} title={"Increment"} />
+      <Button onPress={decrement} title={"Decrement"} />
+    </View>
+  );
+};
+export default ChangeUI;

17. Zustand/4. Access State In Other Components/src/store/store.ts

@@ -0,0 +1,13 @@
+import { create } from "zustand";
+
+type CounterStore = {
+  count: number;
+  increment: () => void;
+  decrement: () => void;
+};
+
+export const useCounterStore = create<CounterStore>((set) => ({
+  count: 0,
+  increment: () => set((state) => ({ count: state.count + 1 })),
+  decrement: () => set((state) => ({ count: state.count - 1 })),
+}));