Recoil 定义了一个有向图 (directed graph)，正交同时又天然连结于你的 React 树上。状态的变化从该图的顶点（我们称之为 atom）开始，流经纯函数 (我们称之为 selector) 再传入组件。

Recoil

在 Recoil 中，监听多个 atom 主要可以通过使用 `selector` 来实现。`Selector` 是 Recoil 的一个核心概念，它允许您创建一个派生状态，该状态可以依赖于一个或多个 atoms 或其他 selectors。

以下是如何使用 selector 来监听多个 atoms 的一个例子：

### 步骤 1: 定义你的 atoms

首先，我们需要定义一些 atoms，这些 atoms 将存储我们应用中的状态。

```javascript
import { atom } from 'recoil';

const firstNameAtom = atom({
  key: 'firstName',
  default: '',
});

const lastNameAtom = atom({
  key: 'lastName',
  default: '',
});
```

这里我们定义了两个简单的 atoms：`firstNameAtom` 和 `lastNameAtom`，它们分别用来存储用户的名字和姓氏。

### 步骤 2: 创建一个 selector 来监听这些 atoms

接下来，我们将创建一个 selector，这个 selector 会依赖于上面定义的两个 atoms。

```javascript
import { selector } from 'recoil';

const fullNameSelector = selector({
  key: 'fullName',
  get: ({ get }) => {
    const firstName = get(firstNameAtom);
    const lastName = get(lastNameAtom);
    return `${firstName} ${lastName}`.trim();
  },
});
```

在这个 `fullNameSelector` 中，我们使用了 `get` 函数来获取 `firstNameAtom` 和 `lastNameAtom` 的当前值，并将它们组合成一个全名。

### 步骤 3: 在组件中使用这个 selector

最后，我们在 React 组件中使用这个 selector 来显示或处理相关信息。

```javascript
import { useRecoilValue } from 'recoil';
import React from 'react';

function FullName() {
  const fullName = useRecoilValue(fullNameSelector);

  return <div>Full Name: {fullName}</div>;
}

export default FullName;
```

在这个 `FullName` 组件中，我们使用 `useRecoilValue` 钩子来订阅 `fullNameSelector` 的值。当 `firstNameAtom` 或 `lastNameAtom` 的值发生变化时，`fullNameSelector` 会重新计算，从而引发组件的重新渲染。

### 结论

通过使用 Recoil 的 `selector`，您可以方便地监听多个 atoms，并根据这些 atoms 的值派生新的状态。这样可以非常灵活和高效地处理组件之间的状态共享和更新。

Recoil 里面如何监听多个 atom ?

### 1. 理解Recoil和它的基本概念

首先，Recoil是一个由Facebook开发的状态管理库，专为React应用设计。它提供了一种简单有效的方法来管理React应用中的全局状态。Recoil的核心概念包括**atoms**（原子）和**selectors**（选择器）：

- **Atoms**：这是Recoil中最基本的状态单元，可以被认为是应用中的共享状态片段。
- **Selectors**：这是基于原子或其他选择器的派生状态，可以用来计算或转换数据。

### 2. 在Gluestick项目中集成Recoil

假设你的项目是使用Gluestick搭建的，我们需要首先确保Recoil库被正确安装。在你的项目根目录下运行：

```bash
npm install recoil
```

或者使用yarn：

```bash
yarn add recoil
```

### 3. 在React组件中使用Recoil

一旦Recoil安装好了，你需要在你的React应用中的顶层组件（通常是主组件或App组件）中引入`RecoilRoot`。这是必须的，因为它会提供一个Recoil的context供其他组件使用。

```jsx
import { RecoilRoot } from 'recoil';

function App() {
  return (
    <RecoilRoot>
      <YourComponent />
    </RecoilRoot>
  );
}
```

### 4. 定义Atoms

让我们来定义一个简单的atom，比如用户的登录状态：

```jsx
import { atom } from 'recoil';

export const isLoggedInState = atom({
  key: 'isLoggedInState',
  default: false,
});

```

### 5. 使用Atoms

在你需要使用这个状态的组件中，你可以使用`useRecoilState()`或`useRecoilValue()`钩子来读取或更新这个状态：

```jsx
import { useRecoilState } from 'recoil';
import { isLoggedInState } from './store';

function LoginComponent() {
  const [isLoggedIn, setIsLoggedIn] = useRecoilState(isLoggedInState);

  const handleLogin = () => {
    setIsLoggedIn(true);
  };

  return (
    <div>
      <button onClick={handleLogin}>Log In</button>
      {isLoggedIn ? <p>You are logged in</p> : <p>Please log in</p>}
    </div>
  );
}
```

### 6. 高级使用：Selectors

假设你想根据登录状态显示不同的欢迎消息，你可以创建一个selector：

```jsx
import { selector } from 'recoil';
import { isLoggedInState } from './store';

export const welcomeMessageState = selector({
  key: 'welcomeMessageState',
  get: ({get}) => {
    const isLoggedIn = get(isLoggedInState);
    return isLoggedIn ? "Welcome back!" : "Welcome, please log in.";
  },
});

```

然后在组件中使用这个selector：

```jsx
import { useRecoilValue } from 'recoil';
import { welcomeMessageState } from './store';

function WelcomeComponent() {
  const message = useRecoilValue(welcomeMessageState);
  return <h1>{message}</h1>;
}
```

### 结论

通过上述步骤，你可以在Gluestick项目中有效地使用Recoil来管理状态。Recoil提供的原子和选择器模式非常适合用来构建可预测、维护简单的大型应用状态。

如何在 Gluestack 中使用React Recoil

在处理复杂的状态集合时，RecoilJS 提供了一套高效且灵活的方法来管理和更新 React 应用中的状态。Recoil 通过以下几个关键概念来实现这一功能：

1. **Atoms**: Atom 是 Recoil 的基本构建块，代表了应用状态的最小单位。每个 atom 可以包含任何类型的数据，并可以在整个应用中被订阅和更新。这意味着，当一个 atom 的状态发生变化时，所有依赖这个 atom 的组件都会重新渲染。

   例如，如果我们有一个用户配置的状态，我们可以这样定义一个 atom：

   ```javascript
   import { atom } from 'recoil';

   const userSettingsState = atom({
     key: 'userSettingsState',
     default: { theme: 'dark', language: 'en' }
   });
   ```

2. **Selectors**: Selector 是 Recoil 中的一个纯函数，用于从 atom 或其他 selector 中派生状态。Selector 可以被视为状态的转换层，允许你从基本状态派生出复杂或计算后的状态。

   例如，如果我们想基于用户的语言设置派生出一个欢迎信息，我们可以定义一个 selector：

   ```javascript
   import { selector } from 'recoil';

   const welcomeMessageState = selector({
     key: 'welcomeMessageState',
     get: ({get}) => {
       const settings = get(userSettingsState);
       const message = settings.language === 'es' ? 'Bienvenido' : 'Welcome';
       return message;
     }
   });
   ```

3. **异步 Selector**: Recoil 也支持异步 selector，这允许你在 selector 中包含异步逻辑，例如从 API 获取数据。这极大地简化了在 React 组件中处理异步状态的复杂性。

   例如，你可以创建一个异步 selector 来获取用户的详细信息：

   ```javascript
   const userDataState = selector({
     key: 'userDataState',
     get: async ({get}) => {
       const response = await fetch('https://api.example.com/user');
       const userData = await response.json();
       return userData;
     }
   });
   ```

通过这些工具，RecoilJS 允许开发者以一种非常模块化和可维护的方式管理复杂的状态集合。你可以根据需要组合和重用 atoms 和 selectors，使得状态管理既清晰又灵活。这种方式特别适合大型或复杂的应用，其中状态变化可能需要触发多个组件的更新。

RecoilJS 如何管理复杂的状态集合？

在使用RecoilJS构建深度嵌套状态树时，主要是利用Recoil的灵活状态管理能力来处理组件之间的状态共享和更新。Recoil通过提供`atom`和`selector`两种核心概念，使得状态管理在React应用中变得更加简洁和高效。下面我将详细解释如何操作，并给出一个具体的例子。

### 步骤1: 创建基础的Atom
首先，我们需要定义状态的基础单元，称为`atom`。每个atom代表Recoil状态树中的一个节点。例如，如果我们要构建一个用户界面，可能有一个用户信息的状态，我们可以这样定义它：

```javascript
import { atom } from 'recoil';

const userInfoState = atom({
  key: 'userInfoState', // 唯一标识符
  default: { name: '', age: 0, address: { city: '', street: '' } } // 默认值
});
```

### 步骤2: 使用Selector进行状态派生
为了管理更复杂的状态逻辑，可以使用`selector`来派生状态。这允许我们从基础状态中计算出新状态，而不需要修改原始状态。例如，如果我们想要从用户信息中获取完整的地址信息，我们可以创建一个selector：

```javascript
import { selector } from 'recoil';

const userFullAddressState = selector({
  key: 'userFullAddressState',
  get: ({ get }) => {
    const user = get(userInfoState);
    return `${user.address.city}, ${user.address.street}`;
  }
});
```

### 步骤3: 在React组件中使用Recoil状态
接下来，我们可以在React组件中使用这些atoms和selectors。首先需要将Recoil的`RecoilRoot`放在应用的顶层：

```jsx
import { RecoilRoot } from 'recoil';
import UserProfile from './UserProfile';

function App() {
  return (
    <RecoilRoot>
      <UserProfile />
    </RecoilRoot>
  );
}
```

然后，在`UserProfile`组件中，我们可以使用`useRecoilState`或`useRecoilValue`等Hooks来读取和更新状态：

```jsx
import { useRecoilState } from 'recoil';
import { userInfoState, userFullAddressState } from './store';

function UserProfile() {
  const [userInfo, setUserInfo] = useRecoilState(userInfoState);
  const userAddress = useRecoilValue(userFullAddressState);

  const updateName = (name) => {
    setUserInfo({ ...userInfo, name });
  };

  return (
    <div>
      <input 
        value={userInfo.name} 
        onChange={(e) => updateName(e.target.value)} 
      />
      <div>Address: {userAddress}</div>
    </div>
  );
}
```

### 结论
通过上述步骤，我们可以有效地在React应用中使用RecoilJS构建和管理一个深度嵌套的状态树。Recoil的特点在于其简洁的API和对React原生Hooks的天然支持，这使得状态管理既直观又易于维护。在实际开发中，这种方法可以根据应用的具体需求进行调整和扩展。

如何使用 RecoilJS 构建深度嵌套状态树？

在使用Recoil进行状态管理时，实现撤销功能可以通过多种方式完成。以下是一个系统性的方法来在Recoil的历史状态中执行撤销操作：

### 1. 理解Recoil基本概念

首先，确保理解Recoil的基本概念，如`atom`和`selector`。`atom`是Recoil中的状态单元，而`selector`可以用来派生状态或执行包括异步操作的数据转换。

### 2. 设计历史状态的数据结构

为了实现撤销功能，我们需要跟踪状态的历史。可以创建一个`atom`来存储状态的历史记录。例如，如果我们正在管理一个文本编辑器的状态，我们的历史状态`atom`可能看起来像这样：

```javascript
import { atom } from 'recoil';

const textStateHistory = atom({
  key: 'textStateHistory', // 唯一标识
  default: {
    past: [],
    present: '',
    future: []
  }
});
```

这里，`past`数组存储了之前的状态，`present`表示当前状态，`future`数组可以用于重做功能。

### 3. 更新状态时记录历史

每次状态改变时，需要更新历史记录。这通常在状态设置函数中完成：

```javascript
function setText(newText) {
  set(textStateHistory, (currentHistory) => {
    const { past, present } = currentHistory;
    return {
      past: [...past, present], // 将当前状态添加到过去状态数组
      present: newText, // 更新当前状态
      future: [] // 清空未来状态数组，因为我们正在创建新的历史点
    };
  });
}
```

### 4. 实现撤销操作

撤销操作可以通过设置状态来回到历史记录中的前一个状态：

```javascript
function undo() {
  set(textStateHistory, ({ past, present, future }) => {
    if (past.length === 0) return; // 如果没有更早的历史状态，无法撤销
    const previous = past[past.length - 1];
    const newPast = past.slice(0, past.length - 1);
    return {
      past: newPast,
      present: previous,
      future: [present, ...future] // 将当前状态移动到未来状态数组
    };
  });
}
```

### 5. 集成和测试

最后，将这些功能集成到应用程序中，并进行适当的测试以确保撤销和重做功能按预期工作。

### 示例应用：文本编辑器

如果你在开发一个简单的文本编辑器，你会需要集成上述功能来允许用户编辑文本，然后可以撤销或重做他们的更改。结合Recoil的响应式更新机制，这可以提供一个非常流畅和直观的用户体验。

通过这种方式，我们不仅实现了Recoil中的撤销功能，还能够扩展到更复杂的应用场景，例如多字段表单、图形界面编辑器等场景，确保应用的用户友好性和数据一致性。

如何在 Recoil 的历史状态中执行撤消操作？

Recoil 是一个用于在React应用中管理状态的库。在Recoil中，`atom`是存储状态的基本单元，通常用于存储应用的一部分状态。你可以将HTTP请求的结果设置为atom的默认值，但通常并非直接将请求结果作为默认值，而是使用`selector`来处理异步逻辑，并将该selector与atom结合使用。

在Recoil中处理HTTP请求，并将结果设置为atom的默认值的一般步骤如下：

1. 创建一个`selector`来执行HTTP请求。
2. 在`selector`的`get`属性中执行异步函数，如使用`fetch`。
3. 创建一个atom，其默认值设置为这个`selector`。

下面是一个如何实现这一流程的例子：

```javascript
import { atom, selector, useRecoilValue } from 'recoil';

// 定义selector，用于执行HTTP请求
const fetchDataSelector = selector({
  key: 'fetchData', // 唯一标识
  get: async ({ get }) => {
    try {
      const response = await fetch('https://api.example.com/data');
      const data = await response.json();
      return data; // 返回请求的结果
    } catch (error) {
      throw error;
    }
  }
});

// 定义atom，其默认值是上面定义的selector
const dataAtom = atom({
  key: 'data', // 唯一标识
  default: fetchDataSelector // 使用selector作为默认值
});

// 在组件中使用atom的值
const MyComponent = () => {
  // 使用useRecoilValue hook来读取atom的值
  const data = useRecoilValue(dataAtom);

  // 渲染数据或加载状态
  return (
    <div>
      {data ? <div>{JSON.stringify(data)}</div> : <div>Loading...</div>}
    </div>
  );
};
```

在上面的代码中，`fetchDataSelector`负责执行HTTP请求，`dataAtom`则使用这个selector作为其默认值。在组件`MyComponent`中，我们使用了`useRecoilValue` hook来读取`dataAtom`的值，这时会触发`fetchDataSelector`的执行，并在请求完成后提供数据。

需要注意的是，当组件首次渲染时，Recoil会执行selector中的异步操作。如果数据请求成功，Recoil会更新atom的值为请求结果，这样任何使用该atom的组件都将重新渲染并显示新的结果。如果请求失败，你应该处理错误，例如，你可以设置错误状态并在UI中展示给用户。

You can try creating a async selector and put into atom's default, like this:

    const mySelector = selector({
      key: 'mySelector',
      get: async ({get}) => {
        return await setService.getAll()
      }
    })
    
    const myAtom = atom({
      key:'myAtom',
      default: mySelector
    })

Here is a Typescript example, inspired by [this answer](https://stackoverflow.com/a/63904541/1928926).

    // Inside your React component
    
    const val = useRecoilValue(myAtom);
    const updateVal = useSetRecoilState(mySelector);
    
    // Update data with API call on form submit, and append new data to atom state
    const onFormSubmit: SubmitHandler<DataFormValues> = async (values) => {
        const createdData = await createDataWithApiCall();
        await updateData([createdData]);
    };
    

    // Inside recoil state file
    
    export const mySelector = selector({
        key: 'mySelector',
        get: async (): Promise<Array<Data>> => {
            // Set default value to API result
            const apiData = await callApi();
            return apiData;
        },
        set: ({ set, get }, newData) => {
            // Update state w/ new appended values
            const currentState = get(myAtom);
            const newState = [...currentState, ...newData as Data[]];
            set(myAtom, newState);
        },
    });
    
    export const myAtom = atom({
        key: "myAtom",
        default: mySelector,
    });
    

Context: Don't be required to refetch entire to-do list from API each time a user adds an item to a to-do list. Call the API to add the new item, and append the new item to recoil state. Useful when user wants to make edits as well.

Recoil 如何将 http 请求结果设置为 atom 的默认值？

在 Recoil 中，`atomFamily` 是一个工具函数，它允许我们创建一组相关的 atoms，每一个 atom 都有一个独特的参数作为标识。然而，Recoil 原生并没有直接提供一个函数可以一次性获取 `atomFamily` 中所有的元素。但是，我们可以通过跟踪使用过的参数来间接获取所有的元素。

要追踪一个 `atomFamily` 中所有的元素，你可以创建一个 Recoil selector，这个 selector 会追踪每个被创建和使用过的 atom。每次使用 `atomFamily` 的时候，你可以将其参数添加到一个全局的集合中，并通过这个集合来知道哪些 `atomFamily` 的成员是被访问过的。

例如，以下是如何实现这个功能的一个简单例子：

```javascript
import { atomFamily, selector, useRecoilValue } from 'recoil';

// 定义一个用于追踪访问过的 atomFamily 成员的集合
const atomFamilyParametersSet = new Set();

// 一个示例 atomFamily
const myAtomFamily = atomFamily({
  key: 'MyAtomFamily',
  default: param => {
    // 这里添加逻辑来确定你的默认值
    return defaultValueBasedOnParam(param);
  },
  effects_UNSTABLE: param => [
    ({setSelf, onSet}) => {
      // 当atomFamily的成员被创建时，将其参数添加到集合中
      atomFamilyParametersSet.add(param);
      onSet((newValue, oldValue, isReset) => {
        // 如果有必要，也可以在这里处理值的变化
      });
    },
  ],
});

// 定义一个 selector 来追踪和获取所有已访问的 atomFamily 成员
const allMyAtomFamilyMembers = selector({
  key: 'AllMyAtomFamilyMembers',
  get: ({ get }) => {
    // 将所有追踪过的参数转换成对应的 atomFamily 成员的值
    const allAtoms = Array.from(atomFamilyParametersSet).map(param =>
      get(myAtomFamily(param))
    );
    return allAtoms;
  },
});

// 使用 React 组件时，可以这样获取所有 atomFamily 成员的状态
const MyComponent = () => {
  const allMembers = useRecoilValue(allMyAtomFamilyMembers);
  // 渲染所有 atomFamily 成员的信息...
};
```

在这个例子中，我们创建了一个 `atomFamily`，并使用 `effects_UNSTABLE` 进行了一个效果的设置，在每次这个 atom 被创建时，我们会将其参数添加到 `atomFamilyParametersSet` 集合中。然后，我们定义了一个 `selector` 来获取和追踪所有已经访问过的 `atomFamily` 成员，我们利用这个 `selector` 来得到这些成员的状态。最后，在组件中使用 `useRecoilValue` 来获取所有成员的状态并进行渲染。请注意，这个方法只能跟踪到被实际使用过（即被 `get` 或 `set`）的 atomFamily 成员。未被使用的成员不会被添加到集合中。

Instead of using `useRecoilCallback` you can abstract it with `selectorFamily`.

    // atomFamily
    const mealsAtom = atomFamily({
      key: "meals",
      default: {}
    });
    
    const mealIds = atom({
      key: "mealsIds",
      default: []
    });
    
    // abstraction
    const meals = selectorFamily({
      key: "meals-access",
      get:  (id) => ({ get }) => {
          const atom = get(mealsAtom(id));
          return atom;
      },
      set: (id) => ({set}, meal) => {
          set(mealsAtom(id), meal);
          set(mealIds (id), prev => [...prev, meal.id)]);
      }
    });
    

Further more, in case you would like to support reset you can use the following code:

    // atomFamily
    const mealsAtom = atomFamily({
      key: "meals",
      default: {}
    });
    
    const mealIds = atom({
      key: "mealsIds",
      default: []
    });
    
    // abstraction
    const meals = selectorFamily({
      key: "meals-access",
      get:  (id) => ({ get }) => {
          const atom = get(mealsAtom(id));
          return atom;
      },
      set: (id) => ({set, reset}, meal) => {
          if(meal instanceof DefaultValue) {
            // DefaultValue means reset context
            reset(mealsAtom(id));
            reset(mealIds (id));
            return;
          }
          set(mealsAtom(id), meal);
          set(mealIds (id), prev => [...prev, meal.id)]);
      }
    });
    

If you're using Typescript you can make it more elegant by using the following [guard](https://www.typescriptlang.org/docs/handbook/advanced-types.html).

    import { DefaultValue } from 'recoil';
    
    export const guardRecoilDefaultValue = (
      candidate: unknown
    ): candidate is DefaultValue => {
      if (candidate instanceof DefaultValue) return true;
      return false;
    };
    

Using this guard with Typescript will look something like:

    // atomFamily
    const mealsAtom = atomFamily<IMeal, number>({
      key: "meals",
      default: {}
    });
    
    const mealIds = atom<number[]>({
      key: "mealsIds",
      default: []
    });
    
    // abstraction
    const meals = selectorFamily<IMeal, number>({
      key: "meals-access",
      get:  (id) => ({ get }) => {
          const atom = get(mealsAtom(id));
          return atom;
      },
      set: (id) => ({set, reset}, meal) => {
          if (guardRecoilDefaultValue(meal)) {
            // DefaultValue means reset context
            reset(mealsAtom(id));
            reset(mealIds (id));
            return;
          }
          // from this line you got IMeal (not IMeal | DefaultValue)
          set(mealsAtom(id), meal);
          set(mealIds (id), prev => [...prev, meal.id)]);
      }
    });

You have to track all ids of the `atomFamily` to get all members of the family. Keep in mind that this is not really a list, more like a map.

Something like this should get you going.

    // atomFamily
    const meals = atomFamily({
      key: "meals",
      default: {}
    });
    
    const mealIds = atom({
      key: "mealsIds",
      default: []
    });
    

When creating a new objects inside the family you also have to update the `mealIds` atom.

I usually use a `useRecoilCallback` hook to sync this together

      const createMeal = useRecoilCallback(({ set }) => (mealId, price) => {
        set(mealIds, currVal => [...currVal, mealId]);
        set(meals(mealId), {name: mealId, price});
      }, []);
    

This way you can create a meal by calling:

    createMeal("bananas", 5);
    

And get all ids via:

    const ids = useRecoilValue(mealIds);

You can use an `atom` to track the ids of each atom in the `atomFamily`. Then use a `selectorFamily` or a custom function to update the atom with the list of ids when a new atom is added or deleted from the `atomFamily`. Then, the atom with the list of ids can be used to extract each of the atoms by their id from the `selectorFamily`.

    // File for managing state
    
    
    //Atom Family
    export const mealsAtom = atomFamily({
      key: "meals",
      default: {},
    });
    //Atom ids list
    export const mealsIds = atom({
      key: "mealsIds",
      default: [],
    });
    

This is how the `selectorFamily` looks like:

    // File for managing state
    
    export const mealsSelector = selectorFamily({
      key: "mealsSelector",
      get: (mealId) => ({get}) => {
        return get(meals(mealId));
      },
      set: (mealId) => ({set, reset}, newMeal) => {
        // if 'newMeal' is an instance of Default value, 
        // the 'set' method will delete the atom from the atomFamily.
        if (newMeal instanceof DefaultValue) {
          // reset method deletes the atom from atomFamily. Then update ids list.
          reset(mealsAtom(mealId));
          set(mealsIds, (prevValue) => prevValue.filter((id) => id !== mealId));
        } else {
          // creates the atom and update the ids list
          set(mealsAtom(mealId), newMeal);
          set(mealsIds, (prev) => [...prev, mealId]);
        }
      },
    });
    

**Now, how do you use all this?**

*   Create a meal:

In this case i'm using current timestamp as the atom id with `Math.random()`

    // Component to consume state
    
    import {mealsSelector} from "your/path";
    import {useSetRecoilState} from "recoil";
    const setMeal = useSetRecoilState(mealsSelector(Math.random()));
    
    setMeal({
        name: "banana",
        price: 5,
    });
    
    

*   Delete a meal:

    // Component to consume state
    
    import {mealsSelector} from "your/path";
    import {DefaultValue, useSetRecoilState} from "recoil";
    
    const setMeal = useSetRecoilState(mealsSelector(mealId));
    setMeal(new DefaultValue());
    

*   Get all atoms from atomFamily:

Loop the list of ids and render Meals components that receive the id as props and use it to get the state for each atom.

    // Component to consume state, parent of Meals component
    
    import {mealsIds} from "your/path";
    import {useRecoilValue} from "recoil";
    
    const mealIdsList = useRecoilValue(mealsIds);
    
        //Inside the return function:
        return(
          {mealIdsList.slice()
              .map((mealId) => (
                <MealComponent
                  key={mealId}
                  id={mealId}
                />
              ))}
        );
    

    // Meal component to consume state
    
    import {mealsSelector} from "your/path";
    import {useRecoilValue} from "recoil";
    
    const meal = useRecoilValue(mealsSelector(props.id));
    

Then, you have a list of components for Meals, each with their own state from the `atomFamily`.

Here is how I have it working on my current project:

(For context this is a dynamic form created from an array of field option objects. The form values are submitted via a graphql mutation so we only want the minimal set of changes made. The form is therefore built up as the user edits fields)

    import { atom, atomFamily, DefaultValue, selectorFamily } from 'recoil';
    
    type PossibleFormValue = string | null | undefined;
    
    export const fieldStateAtom = atomFamily<PossibleFormValue, string>({
      key: 'fieldState',
      default: undefined,
    });
    
    export const fieldIdsAtom = atom<string[]>({
      key: 'fieldIds',
      default: [],
    });
    
    export const fieldStateSelector = selectorFamily<PossibleFormValue, string>({
      key: 'fieldStateSelector',
      get: (fieldId) => ({ get }) => get(fieldStateAtom(fieldId)),
      set: (fieldId) => ({ set, get }, fieldValue) => {
        set(fieldStateAtom(fieldId), fieldValue);
        const fieldIds = get(fieldIdsAtom);
        if (!fieldIds.includes(fieldId)) {
          set(fieldIdsAtom, (prev) => [...prev, fieldId]);
        }
      },
    });
    
    export const formStateSelector = selectorFamily<
      Record<string, PossibleFormValue>,
      string[]
    >({
      key: 'formStateSelector',
      get: (fieldIds) => ({ get }) => {
        return fieldIds.reduce<Record<string, PossibleFormValue>>(
          (result, fieldId) => {
            const fieldValue = get(fieldStateAtom(fieldId));
            return {
              ...result,
              [fieldId]: fieldValue,
            };
          },
          {},
        );
      },
      set: (fieldIds) => ({ get, set, reset }, newValue) => {
        if (newValue instanceof DefaultValue) {
          reset(fieldIdsAtom);
          const fieldIds = get(fieldIdsAtom);
          fieldIds.forEach((fieldId) => reset(fieldStateAtom(fieldId)));
        } else {
          set(fieldIdsAtom, Object.keys(newValue));
          fieldIds.forEach((fieldId) => {
            set(fieldStateAtom(fieldId), newValue[fieldId]);
          });
        }
      },
    });
    

The atoms are selectors are used in 3 places in the app:

In the field component:

    ...
    const localValue = useRecoilValue(fieldStateAtom(fieldId));
    const setFieldValue = useSetRecoilState(fieldStateSelector(fieldId));
    ...
    

In the save-handling component (although this could be simpler in a form with an explicit submit button):

    ...
    const fieldIds = useRecoilValue(fieldIdsAtom);
    const formState = useRecoilValue(formStateSelector(fieldIds));
    ...
    

And in another component that handles form actions, including form reset:

    ...
    const resetFormState = useResetRecoilState(formStateSelector([]));
    ...
    const handleDiscard = React.useCallback(() => {
      ...
      resetFormState();
      ...
    }, [..., resetFormState]);

Recoil 如何获得原子族 atomfamily 的所有元素?

在 React Recoil 中，通常我们会在组件内部使用 Recoil 的 `useRecoilState` 或 `useSetRecoilState` 钩子来更新 atom 原子状态。但是，在某些场景下，我们可能需要在组件外部，例如在一个异步函数或者一个普通的 JavaScript 模块中更新 Recoil 的状态。为了实现这一点，我们可以使用 Recoil 的 `RecoilRoot` 和 `atom` API 来创建全局状态，并使用 `useRecoilCallback` 钩子来创建一个可以在组件外部调用的更新函数。

下面是在组件外部更新 atom 状态的步骤：

1. **定义一个 atom：**

```jsx
import { atom } from 'recoil';

export const myAtom = atom({
  key: 'myAtom',
  default: 0, // 初始值
});
```

2. **在组件树中提供一个 RecoilRoot：**

```jsx
import React from 'react';
import { RecoilRoot } from 'recoil';
import App from './App';

function RootComponent() {
  return (
    <RecoilRoot>
      <App />
    </RecoilRoot>
  );
}
```

3. **使用 `useRecoilCallback` 创建可以从组件外部调用的回调函数：**

```jsx
import { useRecoilCallback } from 'recoil';
import { myAtom } from './store';

function useUpdateAtom() {
  const updateAtom = useRecoilCallback(({ set }) => (newValue) => {
    set(myAtom, newValue);
  }, []);

  return updateAtom;
}
```

4. **在组件内部调用 `useUpdateAtom` 并将返回的函数暴露给外部：**

```jsx
import React from 'react';
import { useUpdateAtom } from './useUpdateAtom';

function MyComponent() {
  const updateAtomFromOutside = useUpdateAtom();
  
  // 你现在可以将 updateAtomFromOutside 函数传递给外部或者注册为全局方法
  // 例如绑定到 window 对象，或者传递给需要调用更新操作的外部模块

  return (
    <div>
      <button onClick={() => updateAtomFromOutside(10)}>Update Atom</button>
    </div>
  );
}
```

5. **在组件外部使用该函数更新 atom 状态：**

```javascript
// 假设你已经在合适的地方获取到了 updateAtomFromOutside 函数
updateAtomFromOutside(20); // 这将会更新 myAtom 的值为 20
```

通过这种方式，我们可以轻松地在组件外部更新 Recoil 的状态，同时还能保持与 Recoil 状态管理库的整体架构兼容。这对于处理那些不直接绑定在 React 组件生命周期上的逻辑，如定时器、网络请求回调等情况特别有用。

As I pointed out in [another answer](https://stackoverflow.com/a/65198580/11783958), you generally don't want to run into this, but if you eventually really need to **update atoms outside of React** Components you might give a try to [**Recoil Nexus**](https://www.npmjs.com/package/recoil-nexus).

In the same file where you have your RecoilRoot you'll have something like:

    import React from 'react';
    import { RecoilRoot } from "recoil"
    import RecoilNexus from 'recoil-nexus'
    
    export default function App() {
      return (
        <RecoilRoot>
          <RecoilNexus/>
          
          {/* ... */}
          
        </RecoilRoot>
      );
    };
    
    
    export default App;
    

Then, wherever you need to read/update the values:

    import yourAtom from './yourAtom'
    import { getRecoil, setRecoil } from 'recoil-nexus'
    

Eventually you can get and set the values like this:

    
    const loading = getRecoil(loadingState)
    
    setRecoil(loadingState, !loading)
    
    

That's it!

_Disclaimer: I am the author of the library._

* * *

**Check this [CodeSandbox](https://githubbox.com/luisanton-io/simple-loader-with-nexus) for a live example.**

I think the only way (at least as of a few months ago) is a sort of hack where you include a non-rendering component that uses the recoil hooks and exports the provided functions from them.

See: [https://github.com/facebookexperimental/Recoil/issues/289#issuecomment-777249693](https://github.com/facebookexperimental/Recoil/issues/289#issuecomment-777249693)

Below is the file from my own project that achieves this, heavily based on that link above. All you need to do is put `<RecoilExternalStatePortal />` anywhere in your application tree that is guaranteed to _always_ render.

This seems like an omission in the Recoil API, IMHO.

    import React from 'react'
    import { Loadable, RecoilState, RecoilValue, useRecoilCallback, useRecoilTransactionObserver_UNSTABLE } from 'recoil'
    
    /**
     * Returns a Recoil state value, from anywhere in the app.
     *
     * Can be used outside of the React tree (outside a React component), such as in utility scripts, etc.
    
     * <RecoilExternalStatePortal> must have been previously loaded in the React tree, or it won't work.
     * Initialized as a dummy function "() => null", it's reference is updated to a proper Recoil state mutator when RecoilExternalStatePortal is loaded.
     *
     * @example const lastCreatedUser = getRecoilExternal(lastCreatedUserState);
     */
    export function getRecoilState<T>(recoilValue: RecoilValue<T>): T {
      return getRecoilLoadable(recoilValue).getValue()
    }
    
    /** The `getLoadable` function from recoil. This shouldn't be used directly. */
    let getRecoilLoadable: <T>(recoilValue: RecoilValue<T>) => Loadable<T> = () => null as any
    
    /**
     * Sets a Recoil state value, from anywhere in the app.
     *
     * Can be used outside of the React tree (outside a React component), such as in utility scripts, etc.
     *
     * <RecoilExternalStatePortal> must have been previously loaded in the React tree, or it won't work.
     * Initialized as a dummy function "() => null", it's reference is updated to a proper Recoil state mutator when RecoilExternalStatePortal is loaded.
     *
     * @example setRecoilExternalState(lastCreatedUserState, newUser)
     */
    export let setRecoilState: <T>(recoilState: RecoilState<T>, valOrUpdater: ((currVal: T) => T) | T) => void = () =>
      null as any
    
    /**
     * Utility component allowing to use the Recoil state outside of a React component.
     *
     * It must be loaded in the _app file, inside the <RecoilRoot> component.
     * Once it's been loaded in the React tree, it allows using setRecoilExternalState and getRecoilExternalLoadable from anywhere in the app.
     *
     * @see https://github.com/facebookexperimental/Recoil/issues/289#issuecomment-777300212
     * @see https://github.com/facebookexperimental/Recoil/issues/289#issuecomment-777305884
     * @see https://recoiljs.org/docs/api-reference/core/Loadable/
     */
    export function RecoilExternalStatePortal() {
      // We need to update the getRecoilExternalLoadable every time there's a new snapshot
      // Otherwise we will load old values from when the component was mounted
      useRecoilTransactionObserver_UNSTABLE(({ snapshot }) => {
        getRecoilLoadable = snapshot.getLoadable
      })
    
      // We only need to assign setRecoilExternalState once because it's not temporally dependent like "get" is
      useRecoilCallback(({ set }) => {
        setRecoilState = set
    
        return async () => {
          // no-op
        }
      })()
    
      return <></>
    }

I think the right way to handle this in react is with a custom hook/facade. That way you can keep code centralized, but share it with the components that need it, and in this case, include code that relies on hooks/being in a component. This article explains it fairly well:

[https://wanago.io/2019/12/09/javascript-design-patterns-facade-react-hooks/](https://wanago.io/2019/12/09/javascript-design-patterns-facade-react-hooks/)

But the basic idea is that you would create an custom `useAuth` hook, that would expose what you need:

    export function useAuth() {
      const [auth, setAuth] = useRecoilState(authAtom);
      const resetAuth = useResetRecoilState(authAtom);
      const authState = useMemo(() => {
        return {
          isAuthenticated: () => {
            return !!auth.accessToken && auth.expiresAt > new Date();
          },
        };
      }, [auth]);
      ...
      return { auth, authState, logout: resetAuth, /* and maybe more, error, login, etc */ };
    

and then use it in components that need auth:

    const AuthorizedComponent: FC<Props> = (props) => {
      const { auth, authState } = useAuth();

Recoil相关问题