How to manage a User profile state with Zustand, Typescript and React.

• 
  Definition of the Store with multiple states:
  We define a store to manage the user profile which includes properties such as name, age and email. We will also add some actions to update these properties.

  
  import create from 'zustand';
  import { shallow } from 'zustand/shallow';
  
  interface UserProfileState {
    name: string;
    age: number;
    email: string;
    setName: (name: string) => void;
    setAge: (age: number) => void;
    setEmail: (email: string) => void;
  }
  
  const useStore = create<UserProfileState>((set) => ({
    name: '',
    age: 0,
    email: '',
    setName: (name) => set(() => ({ name })),
    setAge: (age) => set(() => ({ age })),
    setEmail: (email) => set(() => ({ email }))
  }));
  
  // Custom hook for using the store with shallow
  const useUserProfileStore = <T>(selector: (state: UserProfileState) => T) => useStore(selector, shallow);
  
  export default useUserProfileStore;
  

  Using the Store in React Components:
  We use our custom hook in React components to manage and display the user profile.

  
  import React from 'react';
  import useUserProfileStore from '../store';
  
  const UserProfile: React.FC = () => {
    const { name, age, email, setName, setAge, setEmail } = useUserProfileStore((state) => ({
      name: state.name,
      age: state.age,
      email: state.email,
      setName: state.setName,
      setAge: state.setAge,
      setEmail: state.setEmail
    }), shallow);
  
    return (
      <div>
        <h2>User Profile</h2>
        <div>
          <label>
            Name:
            <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
          </label>
        </div>
        <div>
          <label>
            Age:
            <input type="number" value={age} onChange={(e) => setAge(Number(e.target.value))} />
          </label>
        </div>
        <div>
          <label>
            Email:
            <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
          </label>
        </div>
      </div>
    );
  };
  
  export default UserProfile;
  

  Integrate the Component into the Application:
  Let's integrate the UserProfile component into the main app.

  
  import React from 'react';
  import UserProfile from './components/UserProfile';
  
  const App: React.FC = () => {
    return (
      <div>
        <h1>My Zustand User Profile App</h1>
        <UserProfile />
      </div>
    );
  };
  
  export default App;
  

  Good:
  We created a Zustand store with create and defined the UserProfileState type to type the state and actions. The store manages the name, age, and email properties of the user profile and provides actions to update them. We created a custom useUserProfileStore hook that uses shallow to optimize state selection. This helps prevent unnecessary rendering. In the React UserProfile component, we use our custom hook to access and manipulate the state of the store. We have input fields to update the user's name, age and email.