1. First install Zustand Using the below command
npm install zustand # or yarn add zustand or pnpm add zustand
import { create } from 'zustand'
import { persist, createJSONStorage }
from 'zustand/middleware'
const useAppStore = create(
persist(
(set, get) => ({
userdata: {},
updateUserData: (userdata) =>
set({ userdata: userdata }),
}),
{
name: 'app-storage', // name of the item in the storage (must be unique)
// storage: createJSONStorage(() => sessionStorage),
// (optional) by default, 'localStorage' is used
},
),
)
export default useAppStore;
// Profile.js
import React, { useEffect } from 'react';
import { useNavigate } from "react-router-dom";
import useAppStore from '../appStore';
const Profile = () => {
const navigate = useNavigate();
const { userdata } = useAppStore();
useEffect(() => {
console.log('userData ', userdata);
}, [userdata])
return (
<div className="container mx-auto mt-8 max-w-lg">
<div className="bg-white p-8 rounded shadow-md">
<h1 className="text-2xl font-semibold mb-4">My Profile</h1>
<div className="flex items-center space-x-4">
<img
src="https://placekitten.com/100/100" // Replace with your profile image URL
alt="Profile"
className="rounded-full w-16 h-16"
/>
<div>
<p className="text-lg font-semibold">{userdata.name}</p>
<p className="text-gray-500">{userdata.email}</p>
</div>
</div>
<div className="mt-6">
<h2 className="text-xl font-semibold mb-2">Bio</h2>
<p className="text-gray-700">
{userdata.bio}
</p>
</div>
<div className="mt-6">
<h2 className="text-xl font-semibold mb-2">Contact Information</h2>
<ul>
<li className="flex items-center space-x-2">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
className="h-5 w-5 text-gray-500"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M21 13.255A10.942 10.942 0 0 1 12 24a10.942 10.942 0 0 1-9-4.745M19.926 2.07a16.634 16.634 0 0 1-3.74.774 1.999 1.999 0 0 0-1.725-2.352A9.982 9.982 0 0 0 12 0C6.48 0 2.453 3.686 1.02 8.566a1.999 1.999 0 0 0 .475 2.026 17.039 17.039 0 0 1-1.646 4.536 1.992 1.992 0 0 0 .553 2.376 11.025 11.025 0 0 0 15.053-.582 2.001 2.001 0 0 0 2.562-1.572c.512-2.619.303-5.298-.682-7.676zM14.5 3a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm-2 9a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm2 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"
/>
</svg>
<span>Email: your.email@example.com</span>
</li>
<li className="flex items-center space-x-2">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
className="h-5 w-5 text-gray-500"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M3 4v6a1 1 0 0 0 1 1h13.5M21 12v-2a4 4 0 0 0-4-4H5m16 0v6a1 1 0 0 1-1 1H5m4 0a2 2 0 0 1 2-2h7.5M6 16h8.5m-2 4l2-2m-2 2l2-2m-2 2l2-2"
/>
</svg>
<span>Phone: +1 123-456-7890</span>
</li>
</ul>
<button
type="submit"
className="bg-green-500 text-white px-4 py-2 rounded-md hover:bg-gree-600 MT-4"
onClick={() => navigate('/update')}
>
Modify
</button>
</div>
</div>
</div>
);
};
export default Profile;
State management is a crucial aspect of React applications, and while React provides its own state management system, there are times when more flexibility is needed. Enter Zustand – a lightweight state management library designed for React. This guide will walk you through how to use Zustand in React JS to efficiently manage state in your applications.
Installation:
To begin using Zustand, you'll need to install it in your React project. Simply run the installation command using npm or yarn.
Creating a Store:
Zustand centers around the concept of stores, which are essentially hooks managing state. Creating a store involves using the `create` function from Zustand. This function allows you to define the initial state and actions to modify that state.
Using the Store in Components:
Once the store is set up, it can be integrated into React components using the `useStore` hook. This hook provides access to the state and actions defined in the store, enabling components to interact with and respond to changes in the shared state.
Connect Multiple Components:
One of the strengths of Zustand is its simplicity in connecting multiple components to the same store. Components using the same store will automatically re-render when the store's state is modified, ensuring a consistent application state across various parts of your UI.
Advanced Features:
Zustand provides advanced features such as middleware, devtools integration, and selectors. Middleware can be used for additional processing during state changes, while devtools integration facilitates easy debugging. Selectors allow for more complex state management scenarios by providing a way to derive values from the store's state.
Conclusion:
Zustand offers a lightweight yet powerful solution for state management in React. Whether you're working on a small project or a large-scale application, Zustand provides the flexibility and simplicity needed for effective state management in React JS. Explore its features and integrate it into your projects to streamline and enhance your state management capabilities.
