Theis Gaedigk
b99f52f09a
- Add package.json with dependencies and scripts for development and build - Include Vite logo and React logo SVGs in public/assets - Set up Tailwind CSS in App.css and index.css - Create main App component with routing for Home and Login pages - Implement LoginPage with authentication logic and error handling - Add HomePage component as a landing page - Create MyAlert component for displaying alerts using Chakra UI - Implement color mode toggle functionality with Chakra UI - Set up global state management using Jotai for authentication - Create ProtectedRoutes component to guard routes based on authentication - Add utility components for Toaster and Tooltip using Chakra UI - Configure Tailwind CSS and TypeScript settings for the project - Implement AddLoan component for selecting loan periods and fetching available items
1.2 KiB
1.2 KiB
How to use Atoms
Atoms are the fundamental building blocks of state management in this system. They represent individual pieces of state that can be shared and manipulated across different components.
You can also name it global state.
Creating an Atom
to create an atom you have to declare an atom like this:
import { atom } from 'jotai';
export const NAME_OF_YOUR_ATOM = atom<type_of_your_atom>(initial_value);
In this project we declare all atoms in the states/Atoms.tsxfile. Which you can find above this README file.
Using an Atom
To use an atom in your component, you can use the useAtom hook provided by Jotai. Here's an example of how to use an atom in a React component:
import { useAtom } from 'jotai';
import { NAME_OF_YOUR_ATOM } from '@/states/Atoms';
const MyComponent = () => {
const [value, setValue] = useAtom(NAME_OF_YOUR_ATOM);
return (
<div>
<p>Current value: {value}</p>
<button onClick={() => setValue(newValue)}>Update Value</button>
</div>
);
};
As you can see, you can use useAtom like useState but the state is global. In this example value is the current state of the atom, and setValue is a function to update the state, which is also known as the setter function.