rtk(redux)快速实践 创建一个Post part3 显示和编辑单个文章 添加用户 存储文章日期 增加排序和交互功能

标签：const posts rtk part3 文章 组件 import post

啊，标题好长捏。

这篇对应文档这里呢!

经过上一节，我们实践了最基本的rtk维护状态的流程

在 第三节：基本数据流 中，我们看到了如何从一个空的 Redux+React 项目设置开始，添加一个新的状态 slice ，并创建 React 组件 可以从 Redux store 中读取数据并 dispatch action 来更新该数据。我们还研究了数据如何在应用程序中流动，组件 dispatch action，reducer 处理 action 并返回新状态，以及组件读取新状态并重新渲染 UI。
现在您已经了解了编写 Redux 逻辑的核心步骤，我们将使用这些相同的步骤向我们的社交媒体提要添加一些很实用的新功能：查看单个文章、编辑现有文章、详细信息显示文章作者、发布时间戳和交互按钮。

快马加鞭，继续深入捏！

显示单个文章

上一篇中，文章太长，会让页面拉的很长很长，那么就应该让PostList只显示个文章摘要，点击单个文章，就换到单独显示全文的页面

创建单个文章显示页面

加个组件捏，SinglePostPage ，这个要配合路由使用吖！（/posts/123这种形式就是显示123相关的文章呢！这里123我们一般选取postId捏!）

import React from 'react'
import { useSelector } from 'react-redux'

export const SinglePostPage = ({ match }) => {
  const { postId } = match.params

  const post = useSelector(state =>
    state.posts.find(post => post.id === postId)
  )

  if (!post) {
    return (
      <section>
        <h2>页面未找到！</h2>
      </section>
    )
  }

  return (
    <section>
      <article className="post">
        <h2>{post.title}</h2>
        <p className="post-content">{post.content}</p>
      </article>
    </section>
  )
}

要知道吖，React-Router会给渲染的组件传一个match呢，这个match就是地址栏当前的内容呢，比如你点击了一个id为123的文章，要渲染全文的时候，跳转到/posts/123,123这个postId就一定会包含在match里边哦，所以就可以用match到数据源中寻找（这里是到store里边寻找呢）。

要注意的是！useSelector返回值一旦是新的引用，组件一定重渲染，所以为了性能考虑，组件应始终尝试从 store 中选择它们需要的尽可能少的数据，这将有助于确保它仅在实际需要时才渲染。

注意文档上这一段！

您可能会注意到，这看起来与我们在 组件主体中的逻辑非常相似，其中我们遍历整个 posts 数组以显示主要提要的文章摘录。我们可以尝试提取一个可以在两个地方使用的“文章”组件，但是我们在显示文章摘录和整个文章方面已经存在一些差异。即使有一些重复，通常最好还是暂时分开写，然后我们可以稍后决定不同的代码部分是否足够相似，我们可以真正提取出可重用的组件。

这段特有意思!我们在开发时候，肯定会遇到这种情况，很多时候两个组件基本功能一致，就是有点小差别，比如要进行逻辑判断，是xxx就显示x,是yyy就显示y，我以前都会把两个组件直接合并（其实就是只写一个），结果逻辑块儿肯定会越来越多越来越复杂，如果按照文档上的说法，初期不要怕重复，后期再合适地选择要抽取的部分，这个做法真的是很好，因为那个时候，就是顺理成章地在做，会浑然天成吖！

添加单个文章的路由

嗯，SinglePostPage有了，加路由！之前也说过了，要配合路由使用捏！
(注意不同版本ReactRouter的API不同捏!)

import { PostsList } from './features/posts/PostsList'
import { AddPostForm } from './features/posts/AddPostForm'
import { SinglePostPage } from './features/posts/SinglePostPage'

function App() {
  return (
    <Router>
      <Navbar />
      <div className="App">
        <Switch>
          <Route
            exact
            path="/"
            render={() => (
              <React.Fragment>
                <AddPostForm />
                <PostsList />
              </React.Fragment>
            )}
          />
          <Route exact path="/posts/:postId" component={SinglePostPage} />
          <Redirect to="/" />
        </Switch>
      </div>
    </Router>
  )
}

然后更新PostList就好辣，只要加一个Link，然后点击某个文章就能跳转到某个特定文章的全文页面了呢！
(注意和文档不完全一样，核心在领会使用rtk具体怎么操作数据，操作数据的过程怎么和UI组件连接在一起，再加上UI组件怎么和router配合)

import React from 'react'
import { useSelector } from 'react-redux'
import { Link } from 'react-router-dom'

export const PostsList = () => {
  const posts = useSelector(state => state.posts)

  const renderedPosts = posts.map(post => (
    <article className="post-excerpt" key={post.id}>
      <h3>{post.title}</h3>
      <p className="post-content">{post.content.substring(0, 100)}</p>
      <Link to={`/posts/${post.id}`} className="button muted-button">
        View Post
      </Link>
    </article>
  ))

  return (
    <section className="posts-list">
      <h2>Posts</h2>
      {renderedPosts}
    </section>
  )
}

现在可以加个Navbar组件了，其实很简单，不过是用于在单个文章和所有文章列表之间切换罢了！
当然要注意，Navbar也得加入到合适的Router位置，让他在合适的时机显示！

import React from 'react'

import { Link } from 'react-router-dom'

export const Navbar = () => {
  return (
    <nav>
      <section>
        <h1>Redux 基础教程示例</h1>

        <div className="navContent">
          <div className="navLinks">
            <Link to="/">文章列表</Link>
          </div>
        </div>
      </section>
    </nav>
  )
}

好，经过以上操作，配合router，现在新增了一个显示特定文章全文的页面，并且，可以在全文页和列表页之间切换捏。

标签：const,posts,rtk,part3,文章,组件,import,post
From： https://www.cnblogs.com/nulixuexipython/p/17146865.html