reactjs - 是否有一种行之有效的方法来管理 Recoil 中的原子集合？

Question

我正在测试 Recoil，我需要管理要在主页上显示的帖子列表。

我的第一个想法是用所有的帖子做一个大的Atom，但这似乎有点暴力，因为我们可以直接在主页上编辑帖子。

我的第二个想法是动态生成带有前缀的原子：

const onePost = (postId: string) => atom({
  key: 'post_' + postId,
  default: null,
  effects_UNSTABLE: [localStorageEffect('@post_' + postId)],
});

然后我意识到我是一个玩火的菜鸟，我会在 StackOverflow 上询问了解 Recoil 的人......

Answer 1

您可以使用 atomFamily 来管理您的帖子。如果要添加和删除帖子，可以使用另一个原子来管理帖子 ID。

const postsFamily = atomFamily({
  key: 'postsFamilyKey',
  default: [0, 0],
});

function PostListItem({postID}) {
  const post = useRecoilValue(postsFamily(postID));
  return (
    <div>
      Post ID: {postID}
      Post: {post}
    </div>
  );
}

Answer 2

你可以只使用一个数组：

const postIds = atom({
  key: 'postIds',
  default: [],
  effects_UNSTABLE: [localStorageEffect('postIds')],
});

这样，您可以在一个 atom 中管理 id 列表，并且这些 id 可以引用atomFamily保存帖子内容数据的不同 s。