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

Question

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

我的第一个想法是把所有的帖子做成一个大Atom，但是这样看起来有点暴力，因为我们可以直接在首页编辑帖子。

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

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

然后我意识到我是一个玩火的菜鸟，我应该在 Whosebug 上请教那些了解 Recoil 的人...

Answer 1

你可以只使用一个数组：

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

通过这种方式，您可以在一个原子中管理 ID 列表，这些 ID 可以引用保存帖子内容数据的不同 atomFamily。

Answer 2

您可以使用 atomFamily 来管理您的 post。如果要添加和删除 posts，可以使用另一个原子来管理 post 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>
  );
}

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

Is there a proven way to manage a collection of atoms in Recoil?

reactjs

react-native

react-state-management

recoiljs