feat: add exemple zustand

Author: adrianodesenv

App.tsx

@@ -4,7 +4,7 @@
 
 import 'react-native';
 import React from 'react';
-import App from '../App';
+import App from '../src/App';
 
 // Note: import explicitly to use the types shipped with jest.
 import {it} from '@jest/globals';

__tests__/App.test.tsx

@@ -3,7 +3,7 @@
  */
 
 import {AppRegistry} from 'react-native';
-import App from './App';
+import App from './src/App';
 import {name as appName} from './app.json';
 
 AppRegistry.registerComponent(appName, () => App);

index.js

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "18.2.0",
-    "react-native": "0.73.2"
+    "react-native": "0.73.2",
+    "zustand": "^4.5.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

package.json

@@ -0,0 +1,25 @@
+import React from 'react';
+import {SafeAreaView, ScrollView, Text, View} from 'react-native';
+
+import {User} from './components/User/User';
+import {Product} from './components/Products/Product';
+
+function App(): React.JSX.Element {
+  console.log('Render App----');
+  return (
+    <SafeAreaView>
+      <ScrollView contentInsetAdjustmentBehavior="automatic">
+        <View
+          style={{
+            alignItems: 'center',
+          }}>
+          <Text style={{marginVertical: 50}}>Zustand</Text>
+          <User />
+          <Product />
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+export default App;

src/App.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import {Button, Text, View} from 'react-native';
+import {useProductsStore} from '../../store/products/products';
+
+export const Product = () => {
+  const {products, addProduct, removeProduct} = useProductsStore();
+
+  const product = {
+    id: Math.floor(Math.random() * 100),
+    price: 10,
+    name: `Product ${Math.floor(Math.random() * 100)}`,
+  };
+
+  console.log('Render Product----');
+
+  return (
+    <View style={{marginTop: 50}}>
+      <Text>Product</Text>
+
+      <Button title="Add Product" onPress={() => addProduct(product)} />
+      {products.length > 0 && (
+        <Button
+          title="Remove Product"
+          onPress={() => removeProduct(products[0].id)}
+        />
+      )}
+
+      {products.map((product, index) => (
+        <View key={index} style={{flexDirection: 'row'}}>
+          <Text>{product.id}</Text>
+          <Text>{product.name}</Text>
+          <Text>{product.price}</Text>
+        </View>
+      ))}
+    </View>
+  );
+};

src/components/Products/Product.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import {useUsersStore} from '../../store/users/users';
+import {Button, Text, View} from 'react-native';
+
+export const User = () => {
+  const {users, addUser, removeUser} = useUsersStore();
+
+  console.log('Render User----');
+
+  return (
+    <View>
+      <Text>Usuários</Text>
+      <Button
+        title="Add Usuário"
+        onPress={() =>
+          addUser({
+            id: Math.floor(Math.random() * 100),
+            name: `Usuário ${Math.floor(Math.random() * 100)}`,
+          })
+        }
+      />
+
+      {users.length > 0 && (
+        <Button
+          title="Remove Usuário"
+          onPress={() => removeUser(users[0].id)}
+        />
+      )}
+
+      {users.map((user, index) => (
+        <Text key={index}>{user.name}</Text>
+      ))}
+    </View>
+  );
+};

src/components/User/User.tsx

@@ -0,0 +1,23 @@
+import {create} from 'zustand';
+
+type Product = {
+  id: number;
+  name: string;
+  price: number;
+};
+
+type ProductState = {
+  products: Product[];
+  addProduct: (product: Product) => void;
+  removeProduct: (id: number) => void;
+};
+
+export const useProductsStore = create<ProductState>(set => ({
+  products: [],
+  addProduct: product =>
+    set(state => ({products: [...state.products, product]})),
+  removeProduct: id =>
+    set(state => ({
+      products: state.products.filter(product => product.id !== id),
+    })),
+}));

src/store/products/products.ts

@@ -0,0 +1,19 @@
+import {create} from 'zustand';
+
+type User = {
+  id: number;
+  name: string;
+};
+
+type UserState = {
+  users: User[];
+  addUser: (user: User) => void;
+  removeUser: (id: number) => void;
+};
+
+export const useUsersStore = create<UserState>(set => ({
+  users: [],
+  addUser: user => set(state => ({users: [...state.users, user]})),
+  removeUser: id =>
+    set(state => ({users: state.users.filter(user => user.id !== id)})),
+}));