Listing 1: Recoil-Atoms mit der atom-Funktion erzeugen

import { atom } from 'recoil';

export interface User {
  id: number;
  firstname: string;
  lastname: string;
  username: string;
}

export const userState = atom<User[]>({
  key: 'user',
  default: [],
});


Listing 2: Integration eines Recoil-Atoms in eine React-Komponente

import React, { useEffect } from 'react';
import { useRecoilState } from 'recoil';
import { User, userState } from './User';
import axios from 'axios';

const List: React.FC = () => {
  const [users, setUsers] = useRecoilState(userState);

  useEffect(() => {
    async function fetchData() {
      const { data } = await axios.get<User[]>('http://localhost:8080/users');
      setUsers(data);
    }
    fetchData();
  }, [setUsers]);

  return (
    <div>
      <h1>User List</h1>
      <div>
        {users.map((user) => (
          <div key={user.id}>{`${user.lastname}, ${user.firstname}`}</div>
        ))}
      </div>
    </div>
  );
};

export default List;

Listing 3: Lesender Zugriff auf den Recoil State aus einer Komponente

import React from 'react';
import { useRecoilValue } from 'recoil';
import { userState } from './User';

const Counter: React.FC = () => {
  const data = useRecoilValue(userState);
  return <div>{data.length}</div>;
};

export default Counter;

Listing 4: Erzeugung und Verwendung eines Recoil Selectors

import React from 'react';
import { useRecoilValue, selector } from 'recoil';
import { userState } from './User';

const userCount = selector<number>({
  key: 'userCount',
  get({ get }) {
    return get(userState).length;
  },
});

const Counter: React.FC = () => {
  return <div>{useRecoilValue(userCount)}</div>;
};

export default Counter;

Listing 5: Mapping von Werten in einem Selector

export const userSelector = selector<User>({
  key: 'userSelector',
  get({ get }) {
    return get(userState)[0];
  },
  set({ get, set }, userData) {
    const newUser = userData as User;
    const users = get(userState);
    const username = `${newUser.firstname[0].toLowerCase()}${newUser.lastname.toLowerCase()}`;
    set(userState, [...users, { ...newUser, username }]);
  },
});

Listing 6: Definition eines asynchronen Selectors

const userDetails = selector({
  key: 'userDetails',
  get: async ({ get }) => {
    return (
      await axios.get<User>(
        `http://localhost:8080/users/${get(activeUserState)}`,
      )
    ).data;
  },
});
