Redxu(RTK) 基础 异步逻辑与数据请求 第5.2 节 加载帖子

加载帖子

之前我们在postSlice做了硬编码的post作为其初始状态，现在我们改一下，改成从服务器获取帖子数据。

提取帖子selectors

我们已经在slice中编写过reducer、prepare和thunk，现在继续介绍一个实践，在slice中编写 selector，这个选择器就是我们在 useSelector钩子里传入的函数，
比如下面图片中的函数，就是SinglePostPage.tsx中的用于选取具体数据的函数，为了避免在多个UI组件中重复编写这类代码，文档建议我们把处理同一“块儿”数据的这类函数统一组织在slice文件中集中存放，方便后序管理和引入调用(虽然这不是必须的捏，但这其实更得益于RTK更新后两个钩子的出现，以前的redux中，selector的手动编写也是很麻烦的)。

下面我依照文档把 PostsList.js SinglePostPage.js EditPostForm.js三个文件中的selector函数提取到slice中，并对应使用修改后的函数

//这是注释，显示文件路径捏:/src/features/posts/PostList.tsx
  // 修改前
  // const posts = useAppSelector((state) => state.posts);
  // 修改后
  const posts = useAppSelector(selectAllPosts);

//这是注释，显示文件路径捏:/src/features/posts/SinglePostPage.tsx
   //修改前
  // const post = useAppSelector((state) =>
  //   state.posts.find((post) => post.id === postId)
  // );
  // 修改后
  const post = useAppSelector((state) => selectPostById(state, postId));

//这是注释，显示文件路径捏:/src/features/posts/EdigPostForm.tsx
  //修改前
  // let post = initializeUndefinedPostWhenErrorHappensHelper(
  //   useAppSelector((state) => state.posts.find((post) => post.id === postId))
  // );
  // 修改后
  let post = initializeUndefinedPostWhenErrorHappensHelper(
    useAppSelector((state) => selectPostById(state,postId))
  );

相对来说可以简化一些，尤其在需要编写的功能增多时，重复逻辑可能会增加，这个时候抽取selector是事半功倍的！
但是也可以不这么做，自由度很高哒。

通过编写可重用的选择器来封装数据查找通常是一个好主意。你还可以创建有助于提高性能的“记忆化 memoized” 选择器，我们将在本教程的后面部分进行介绍。
但是，就像任何抽象一样，这不是你 所有 时间、任何地方都应该做的事情。编写选择器意味着需要理解和维护更多的代码。不要觉得你需要为状态的每个字段都编写选择器。建议开始时不使用任何选择器，稍后当你发现自己在应用程序代码的许多部分中查找相同值时添加一些选择器。