How to read data from an array of atoms in Jotai state management library

When using the Jotai state management library, reading data from atom arrays typically involves establishing dependencies between atoms. The following steps will detail how to read data from Jotai's atom arrays, illustrated with a simple example.

Step 1: Install Jotai

First, ensure that Jotai is installed in your project. You can install it using npm or yarn:

bash
npm install jotai
# or
yarn add jotai

Step 2: Create Atoms

In Jotai, the smallest unit of data is an atom. Each atom can store a state value. Below is how to create an atom array:

javascript
import { atom } from 'jotai';

const itemAtom = atom([1, 2, 3]);

Step 3: Reading Data from Atom Arrays

To read data from atom arrays, use a function component with the useAtom hook. This allows the component to subscribe to changes in the atom's state and re-render when the state updates.

javascript
import { useAtom } from 'jotai';
import React from 'react';

function ItemList() {
  const [items] = useAtom(itemAtom);

  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

export default ItemList;

Example: Atom Array with Operations

If you want to not only read data from the atom array but also perform operations to add or remove data, create an atom with read-write functionality.

javascript
const itemAtom = atom([1, 2, 3]);
const addItemAtom = atom(
  (get) => get(itemAtom),
  (get, set, newItem) => {
    const currentItems = get(itemAtom);
    set(itemAtom, [...currentItems, newItem]);
  }
);

function ItemManager() {
  const [items, addItem] = useAtom(addItemAtom);

  return (
    <>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <button onClick={() => addItem(4)}>Add Item 4</button>
    </>
  );
}

export default ItemManager;

In this example, addItemAtom not only reads the original itemAtom but also modifies it by adding new items.

Summary

By using Jotai, you can succinctly manage state in React applications. Reading atom arrays is just one of many features. Jotai provides flexible state management through the combination of atoms and hooks, making it easy to share and manage state between components, resulting in clearer and more modular code.