State management is a crucial aspect of modern application development, and in React Native, managing state effectively can significantly enhance your app’s performance and maintainability. Zustand, a minimalistic state management library for React, provides an elegant and simple solution for handling state in React Native applications. In this blog, we'll explore Zustand, how it works, and why it might be the right choice for your React Native projects.
What is Zustand?
Zustand is a small, fast, and scalable state management solution for React applications. Its name, derived from the German word for "state," reflects its primary function: managing state efficiently. Zustand stands out due to its simplicity and ease of use, allowing you to create state stores with minimal boilerplate code.
Key Features of Zustand
- Minimal API: Zustand offers a simple API that makes managing state intuitive and straightforward.
- No Provider Component: Unlike other state management libraries, Zustand does not require a provider component, which can simplify your component tree.
- Reactivity: Zustand integrates seamlessly with React’s built-in hooks, making it reactive and efficient.
- Middleware Support: Zustand supports middleware for enhanced functionality, such as persistence and logging.
Getting Started with Zustand
1. Installation
First, you need to install Zustand in your React Native project. Open your terminal and run:
npm install zustand
or
yarn add zustand
2. Creating a Store
Zustand uses a store to manage state. A store is a JavaScript object that holds the state and provides methods to update it.
In zustand
a) set
Purpose: To update the state of your store.
How It Works: You use it to modify the state. You provide a function that receives the current state and returns the new state.
b) get
Purpose: To read the current state of the store.
How It Works: You use it to access the current state for reading or making decisions.
Here’s a simple example of creating a Zustand store and usage:
myStore1.jsx
import create from 'zustand';
// Create the store
const myStore1 = create((set, get) => ({
items: [], // Initial state
// Action to fetch items from an API
fetchItems: async () => {
try {
const response = await fetch('https://api.example.com/items'); // Replace with your API URL
const data = await response.json();
set({ items: data });
} catch (error) {
console.error('Failed to fetch items:', error);
}
},
// Action to add an item
addItem: (item) => set((state) => ({
items: [...state.items, item],
})),
// Action to remove an item
removeItem: (id) => set((state) => ({
items: state.items.filter(item => item.id !== id),
})),
// Action to get the count of items
getItemCount: () => get().items.length,
}));
export default myStore1;
Another way to do api call:
itemStoreService.js
export const fetchItems = async (id) => {
try {
const response = await axios.post(`${BASE_URL}/fetchItems`, { id })
const { accessToken, items=[] } = response.data
storage.set('accessToken', accessToken)
const { addItem } = myStore1.getState()
addItem(items)
return response.data
} catch (error) {
console.log("Login Error", error)
throw error
}
}
Usage:
App.jsx
import React, { useEffect } from 'react';
import { View, Text, Button, FlatList, StyleSheet } from 'react-native';
import myStore1 from './myStore1'; // Adjust the path to where your store file is located
import {fetchItems as fetchItemsService} from './itemStoreService.js'
const App = () => {
// Destructure actions and state from the store
const { items, fetchItems, addItem, removeItem, getItemCount } = myStore1();
// Fetch items when the component mounts
useEffect(() => {
fetchItems();
fetchItemsService();
}, [fetchItems,fetchItemsService]);
const handleAddItem = () => {
const newItem = { id: Date.now(), name: 'New Item' };
addItem(newItem);
};
const handleRemoveItem = (id) => {
removeItem(id);
};
return (
<View style={styles.container}>
<Text style={styles.header}>Item List ({getItemCount()})</Text>
<Button title="Add Item" onPress={handleAddItem} />
<FlatList
data={items}
keyExtractor={(item) => item.id.toString()}
renderItem={({ item }) => (
<View style={styles.item}>
<Text>{item.name}</Text>
<Button title="Remove" onPress={() => handleRemoveItem(item.id)} />
</View>
)}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 16,
},
header: {
fontSize: 24,
marginBottom: 16,
},
item: {
flexDirection: 'row',
justifyContent: 'space-between',
padding: 16,
borderBottomWidth: 1,
borderBottomColor: '#ccc',
},
});
export default App;
In this example:
-
createis a function from Zustand that initializes the store. -
setis a function provided by Zustand to update the store. -
countis a piece of state managed by the store. -
increaseanddecreaseare actions that modify the state. -
getis to read the current state of the store -
myStore1We use the hook to get the current state value and action functions.
Advanced Usage
1. Middleware
Zustand supports middleware to enhance its functionality. For example, you can use the persist middleware to save and load state from AsyncStorage/MMKV:
a) Zustand with React Native Async Storage
useScansStore.jsx
import AsyncStorage from '@react-native-async-storage/async-storage';
import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';
// Create the store
export const useScansStore = create()(
persist(
(set, get) => ({
fishes: 0, // Initial state
addAFish: () => set({ fishes: get().fishes + 1 }) // Function to update state
}),
{
name: "food-storage", // Key used to store the data
storage: createJSONStorage(() => AsyncStorage), // Use AsyncStorage for persistence
}
)
);
b) Zustand with MMKV
i) Create mmkv configuration file storage.jsx
import { MMKV } from "react-native-mmkv";
export const storage = new MMKV({
id: 'my-app-storage',
encryptionKey: 'some_encryption_key'
})
export const mmkvStorage = {
setItem: (key, value) => {
storage.set(key, value)
},
getItem: (key) => {
const value = storage.getString(key)
return value ?? null
},
removeItem: (key) => {
storage.delete(key)
},
}
ii)useScansStore.jsx
import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';
import mmkvStorage from './mmkvStorage'; // Import the MMKV storage configuration
// Create the store
export const useScansStore = create()(
persist(
(set, get) => ({
fishes: 0, // Initial state
addAFish: () => set({ fishes: get().fishes + 1 }) // Function to update state
}),
{
name: "food-storage", // Key used to store the data
storage: createJSONStorage(() => mmkvStorage), // Use MMKV for persistence
}
)
);
Best Practices
- Keep Stores Small: To maintain clarity and simplicity, keep Zustand stores focused and small. If your store becomes too large, consider breaking it into smaller, modular stores.
- Use Middleware Wisely: Only use middleware when necessary. It can add complexity and overhead, so apply it based on your needs.
-
Leverage React Native’s Hooks: Zustand integrates well with React’s hooks, so take advantage of hooks like
useEffectanduseCallbackto manage side effects and optimize performance.
Conclusion
Zustand provides a minimalist and efficient approach to state management in React Native applications. Its simple API, reactivity, and middleware support make it an excellent choice for managing state in both small and large projects. By following the examples and best practices outlined in this blog, you can integrate Zustand seamlessly into your React Native app and enjoy a cleaner, more maintainable state management solution.
Related Posts:
https://dev.to/ajmal_hasan/react-native-mmkv-5787
https://dev.to/ajmal_hasan/reactotron-setup-in-react-native-redux-applications-4jj3
Top comments (0)