Taro 小程序开发大型实战（五）：使用 Hooks 版的 Redux 实现应用状态管理（下篇）

2020-04-07 15:07:45 浏览数 (1)

欢迎继续阅读《Taro 小程序开发大型实战》系列，前情回顾：

  • 熟悉的 React，熟悉的 Hooks[1]：我们用 React 和 Hooks 实现了一个非常简单的添加帖子的原型
  • 多页面跳转和 Taro UI 组件库[2]：我们用 Taro 自带的路由功能实现了多页面跳转，并用 Taro UI 组件库升级了应用界面
  • 实现微信和支付宝多端登录[3]：实现了微信、支付宝以及普通登录和退出登录
  • 使用 Hooks 版的 Redux 实现大型应用状态管理（上篇）[4]：使用 Hooks 版的 Redux 实现了 user 逻辑的状态管理重构

这是使用 Hooks 版的 Redux 重构状态管理的下篇，在上篇中我们实现了 user 部分 的状态管理的重构，但受限于篇幅，我们还剩下 Footer 组件部分没有重构，在这一篇中，我们将首先实现 Footer 组件的状态管理的重构，接着我们马上来实现 post 逻辑的状态管理的重构。

如果你不熟悉 Redux，推荐阅读我们的《Redux 包教包会》系列教程：

  • Redux 包教包会（一）：解救 React 状态危机[5]
  • Redux 包教包会（二）：趁热打铁，完全重构[6]
  • Redux 包教包会（三）：各司其职，重拾初心[7]

本文所涉及的源代码都放在了 Github[8] 上，如果您觉得我们写得还不错，希望您能给❤️这篇文章点个在看 Github仓库加星❤️哦~

搞定 Footer 的 Redux 化

本来这个小标题我是不想起的，但是因为，是吧，大家上面在没有小标题的情况下看了这么久，可能已经废（累）了，所以我就贴心的加上一个小标题，帮助你定位接下来讲解的重心。

是的接下来，我们要重构 “我的" tab 页面中的下半部分组件 src/components/Footer/index.js 我们遵循自顶向下的方式来重构，首先是 src/components/Logout/index.js 文件，我们打开这个文件，对其中内容作出如下修改：

代码语言：javascript复制
import Taro, { useState } from '@tarojs/taro'
import { AtButton } from 'taro-ui'
import { useDispatch } from '@tarojs/redux'

import { SET_LOGIN_INFO } from '../../constants'

export default function LoginButton(props) {
  const [isLogout, setIsLogout] = useState(false)
  const dispatch = useDispatch()

  async function handleLogout() {
    setIsLogout(true)

    try {
      await Taro.removeStorage({ key: 'userInfo' })

      dispatch({
        type: SET_LOGIN_INFO,
        payload: {
          avatar: '',
          nickName: '',
        },
      })
    } catch (err) {
      console.log('removeStorage ERR: ', err)
    }

    setIsLogout(false)
  }

  return (
    <AtButton type="secondary" full loading={isLogout} onClick={handleLogout}>
      退出登录
    </AtButton>
  )
}

这一步可能是最能体现引入 Redux 进行状态管理带来好处的一步了 -- 我们将之前至上而下的 React 状态管理逻辑压平，使得底层组件可以在自身中就解决响应的状态和逻辑问题。

可以看到，我们上面的文件中主要有五处改动：

  • 首先我们从 @tarojs/taro 里面导出 useState Hooks。
  • 接着我们将之前在 src/pages/mine/mine.js 中定义的 isLogout 状态移动到组件 Logout 组件内部来，因为它只和此组件有关系。
  • 接着我们用 isLogout 替换在 AtButton 里面用到的 props.loading 属性。
  • 然后，我们考虑将之前按钮点击调用 props.handleLogout Redux 化，我们将这个点击之后的回调函数 handleLogout 在组件内部定义。
  • 最后，我们从 @tarojs/redux 中导入 useDispatch Hooks，并在组件中调用成我们需要的 dispatch 函数，接着我们在 handleLogout 函数中去 dispatch 一个 SET_LOGIN_INFO action 来重置 Store 中的 nickName 和 avatar 属性。

提示 这里我们在组件内定义的 handleLogout 函数和我们之前在 src/pages/mine/mine.js 中定义的类似，只是使用 dispatch action 的方式替换了重置 nickName 和 avatar 的部分。

搞定完 Logout 组件，接着就是 LoginForm 组件的重构了，让我们快马加鞭，让它也接受 Redux 光环的洗礼吧！

打开 src/components/LoginForm/index.jsx ，对其中的内容作出相应的修改如下：

代码语言：javascript复制
import Taro, { useState } from '@tarojs/taro'
import { View, Form } from '@tarojs/components'
import { AtButton, AtImagePicker } from 'taro-ui'
import { useDispatch } from '@tarojs/redux'

import { SET_LOGIN_INFO, SET_IS_OPENED } from '../../constants'
import './index.scss'

export default function LoginForm(props) {
  // Login Form 登录数据
  const [formNickName, setFormNickName] = useState('')
  const [files, setFiles] = useState([])
  const [showAddBtn, setShowAddBtn] = useState(true)

  const dispatch = useDispatch()

  function onChange(files) {
    if (files.length > 0) {
      setShowAddBtn(false)
    } else {
      setShowAddBtn(true)
    }

    setFiles(files)
  }

  function onImageClick() {
    Taro.previewImage({
      urls: [props.files[0].url],
    })
  }

  async function handleSubmit(e) {
    e.preventDefault()

    // 鉴权数据
    if (!formNickName || !files.length) {
      Taro.atMessage({
        type: 'error',
        message: '您还有内容没有填写！',
      })

      return
    }

    setShowAddBtn(true)

    // 提示登录成功
    Taro.atMessage({
      type: 'success',
      message: '恭喜您，登录成功！',
    })

    // 缓存在 storage 里面
    const userInfo = { avatar: files[0].url, nickName: formNickName }

    // 清空表单状态
    setFiles([])
    setFormNickName('')

    // 缓存在 storage 里面
    await Taro.setStorage({ key: 'userInfo', data: userInfo })

    dispatch({ type: SET_LOGIN_INFO, payload: userInfo })

    // 关闭弹出层
    dispatch({ type: SET_IS_OPENED, payload: { isOpened: false } })
  }

  return (
    <View className="post-form">
      <Form onSubmit={handleSubmit}>
        <View className="login-box">
          <View className="avatar-selector">
            <AtImagePicker
              length={1}
              mode="scaleToFill"
              count={1}
              files={files}
              showAddBtn={showAddBtn}
              onImageClick={onImageClick}
              onChange={onChange}
            />
          </View>
          <Input
            className="input-nickName"
            type="text"
            placeholder="点击输入昵称"
            value={formNickName}
            onInput={e => setFormNickName(e.target.value)}
          />
          <AtButton formType="submit" type="primary">
            登录
          </AtButton>
        </View>
      </Form>
    </View>
  )
}

这一步和上一步类似，可能也是最能体现引入 Redux 进行状态管理带来好处的一步了，我们同样将之前在顶层组件中提供的状态压平到了底层组件内部。

可以看到，我们上面的文件中主要有四处改动：

  • 首先我们将 formNickName 和 files 等状态放置到 LoginForm 组件内部，并使用 useState Hooks 管理起来，因为它们只和此组件有关系。
  • 接着，我们将 AtImagePicker 里面的 props.files 替换成 files，将它的 onChange 回调函数内部的设置改变状态的 props.handleFilesSelect(files) 替换成 setFiles(files)。可以看到这里我们还对 files.length = 0 的形式做了一个判断，当没有选择图片时，要把我们选择图片的按钮显示出来。
  • 接着，我们将 Input 组件的 props.formNickName 替换成 formNickName，将之前 onInput 接收的回调函数换成了 setFormNickName 的形式来设置 formNickName 的变化。
  • 接着，我们将之前提交表单需要调用的父组件方法 props.handleSubmit 移动到组件内部来定义，可以看到，这个 hanldeSubmit 组合了之前在 src/components/Footer/index.jsx 和 src/pages/mine/mine.js 组件里的 handleSubmit 逻辑：
    • 首先使用 e.preventDefault 禁止浏览器默认行为。
    • 接着进行数据验证，不合要求的数据就会被驳回并显示错误（其实这里应该显示警告 warning，当时写代码时石乐志?）。
    • 接着因为 LoginForm 表单数据要被清除，所以我们将选中图片的按钮又设置为可显示状态。
    • 接着提示登录成功。
    • 清空表单状态。
    • 将登录数据缓存在 storage 里面，在 Taro 里面使用 Taro.setStorage({ key, data }) 的形式来缓存，其中 key 是字符串，data 是字符串或者对象。
    • 最后我们导出了 useDispatch Hooks，使用 useDispatch Hooks 生成的 dispatch 函数的引用来发起更新 Redux store 的 action 来更新本地数据，type 为 SET_LOGIN_INFO 的 action 用来更新用户登录信息，type 为 SET_IS_OPENED 的 action 用来更新 isOpened 属性，它将关闭展示登录框的弹出层 FloatLayout 组件。

讲到这里，我们的 Footer 部分的重构大业还剩下临门一脚了。让我们打开 src/components/Footer/index.js 文件，立马来重构它：

代码语言：javascript复制
import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtFloatLayout } from 'taro-ui'
import { useSelector, useDispatch } from '@tarojs/redux'

import Logout from '../Logout'
import LoginForm from '../LoginForm'
import './index.scss'
import { SET_IS_OPENED } from '../../constants'

export default function Footer(props) {
  const nickName = useSelector(state => state.user.nickName)
  
  const dispatch = useDispatch()

  // 双取反来构造字符串对应的布尔值，用于标志此时是否用户已经登录
  const isLogged = !!nickName

  // 使用 useSelector Hooks 获取 Redux Store 数据
  const isOpened = useSelector(state => state.user.isOpened)

  return (
    <View className="mine-footer">
      {isLogged && <Logout />}
      <View className="tuture-motto">
        {isLogged ? 'From 图雀社区 with Love ❤' : '您还未登录'}
      </View>
      <AtFloatLayout
        isOpened={isOpened}
        title="登录"
        onClose={() =>
          dispatch({ type: SET_IS_OPENED, payload: { isOpened: false } })
        }
      >
        <LoginForm />
      </AtFloatLayout>
    </View>
  )
}

可以看到上面的代码主要有五处改动：

  • 首先我们已经将 nickName 抽取到 Redux store 保存的状态中，所以之前从父组件获取的 props.isLogged 判断是否登录的信息，我们移动到组件内部来，使用 useSelector Hooks 从 Redux store 从获取 nickName 属性，进行双取反操作成布尔值来表示是否已经登录的 isLogged 属性，并使用它来替换之前的 props.isLogged 属性。
  • 接着，就是取代之前从父组件获取的 props.isOpened 属性，我们使用 useSelector Hooks 从 Redux store 中获取对应的 isOpened 属性，然后替换之前的 props.isOpened，用户控制登录框窗口的弹出层 AtFloatLayout 的打开和关闭。
  • 接着，我们将之前 AtFloatLayout 关闭时（onClose）的回调函数替换成 dispatch 一个 type 为 SET_IS_OPENED 的 action 来设置 isOpened 属性将 AtFloatLayout 关闭。
  • 接着，我们开始移除 Logout 和 LoginForm 组件上不再需要传递的属性，因为在对应的组件中我们已经声明了对应的属性了。
  • 最后，我们删掉之前定义在 Footer 组件内的 formNickName 和 files 等状态，以及不再需要的 handleSubmit 函数，因为它已经在 LoginForm 里面定义了。

完成 “我的” 页面重构

熟悉套路的同学可能都知道起这个标题的含义了吧 ?。

我们一路打怪重构到这里，相比眼尖的人已经摸清楚 Redux 的套路了，结合 Redux 来写 React 代码，就好比 “千里之堤，始于垒土” 一般，我们先把所有细小的分支组件搞定，进而一步一步向顶层组件进发，以完成所有组件的编写。

而这个 src/pages/mine/mine.jsx 组件就是 “我的” 这一 tab 页面的顶层组件了，也是我们在 “我的” 页面需要重构的最后一个页面了，是的，我们马上就要达到第一阶段性胜利了✌️。现在就打开这个文件，对其中的内容作出如下的修改：

代码语言：javascript复制
import Taro, { useEffect } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { useDispatch } from '@tarojs/redux'

import { Header, Footer } from '../../components'
import './mine.scss'
import { SET_LOGIN_INFO } from '../../constants'

export default function Mine() {
  const dispatch = useDispatch()

  useEffect(() => {
    async function getStorage() {
      try {
        const { data } = await Taro.getStorage({ key: 'userInfo' })

        const { nickName, avatar } = data

        // 更新 Redux Store 数据
        dispatch({ type: SET_LOGIN_INFO, payload: { nickName, avatar } })
      } catch (err) {
        console.log('getStorage ERR: ', err)
      }
    }

    getStorage()
  })

  return (
    <View className="mine">
      <Header />
      <Footer />
    </View>
  )
}

Mine.config = {
  navigationBarTitleText: '我的',
}

可以看到，上面的代码做了一下五处改动：

  • 我们导入了 useDispatch Hooks 和 SET_LOGIN_INFO 常量，并把之前在 getStorage 方法里面设置 nickName 和 avatar 的操作替换成了 dispatch 一个 type 为 SET_LOGIN_INFO 的 action。
  • 接着我们删除不再需要的 formNickName、files、isLogout、isOpened 状态，以及 setLoginInfo、handleLogout、handleSetIsOpened、handleClick 、handleSubmit 方法。
  • 最后我们删除 Header 和 Footer 组件上不再不需要的属性。

大功告成?！这里给你颁发一个银牌，以奖励你能一直坚持阅读并跟到这里，我们这一篇教程很长很长，能跟下来的都不容易，希望你能在心里或用实际行动给自己鼓鼓掌?。

小憩一下，恢复精力，整装待发！很多同学可能很好奇了，为什么还只能拿一个银牌呢？那是因为我们的重构进程才走了一半呀✌️，但是不要担心，我们所有新的东西都已经讲完了，接下来就只是一些收尾工作了，当你能坚持到终点的时候，会有惊喜等着你哦！加油吧骚年?。

开始重构 “首页” 之旅

我们依然按照之前的套路，从最底层的组件开始重构，首先是我们的登录框弹出层 LoginForm 组件，让我们打开 src/components/PostForm/index.jsx 文件，对其中的内容作出相应的修改如下：

代码语言：javascript复制
import Taro, { useState } from '@tarojs/taro'
import { View, Form, Input, Textarea } from '@tarojs/components'
import { AtButton } from 'taro-ui'
import { useDispatch, useSelector } from '@tarojs/redux'

import './index.scss'
import { SET_POSTS, SET_POST_FORM_IS_OPENED } from '../../constants'

export default function PostForm(props) {
  const [formTitle, setFormTitle] = useState('')
  const [formContent, setFormContent] = useState('')

  const nickName = useSelector(state => state.user.nickName)
  const avatar = useSelector(state => state.user.avatar)

  const dispatch = useDispatch()

  async function handleSubmit(e) {
    e.preventDefault()

    if (!formTitle || !formContent) {
      Taro.atMessage({
        message: '您还有内容没有填写完哦',
        type: 'warning',
      })

      return
    }

    dispatch({
      type: SET_POSTS,
      payload: {
        post: {
          title: formTitle,
          content: formContent,
          user: { nickName, avatar },
        },
      },
    })

    setFormTitle('')
    setFormContent('')

    dispatch({
      type: SET_POST_FORM_IS_OPENED,
      payload: { isOpened: false },
    })

    Taro.atMessage({
      message: '发表文章成功',
      type: 'success',
    })
  }

  return (
    <View className="post-form">
      <Form onSubmit={handleSubmit}>
        <View>
          <View className="form-hint">标题</View>
          <Input
            className="input-title"
            type="text"
            placeholder="点击输入标题"
            value={formTitle}
            onInput={e => setFormTitle(e.target.value)}
          />
          <View className="form-hint">正文</View>
          <Textarea
            placeholder="点击输入正文"
            className="input-content"
            value={formContent}
            onInput={e => setFormContent(e.target.value)}
          />
          <AtButton formType="submit" type="primary">
            提交
          </AtButton>
        </View>
      </Form>
    </View>
  )
}

这个文件的形式和我们之前的 src/components/LoginForm/index.jsx 文件类似，可以看到，我们上面的文件中主要有四处改动：

  • 首先我们将 formTitle 和 formContent 等状态放置到 PostForm 组件内部，并使用 useState Hooks 管理起来，因为它们只和此组件有关系。
  • 接着，我们将 Input 里面的 props.formTitle 替换成 formTitle，将它的 onInput 回调函数内部的设置改变状态的 props. handleTitleInput 替换成 setFormTitle(e.target.value) 的回调函数。
  • 接着，我们将 Textarea 组件的 props. formContent 替换成 formContent，将之前 onInput 接收的回调函数换成了 setFormContent 的形式来设置 formContent 的变化。
  • 最后，我们将之前提交表单需要调用的父组件方法 props.handleSubmit 移动到组件内部来定义，可以看到，这个 hanldeSubmit 和我们之前定义在 src/pages/index/index.js 组件里的 handleSubmit 逻辑类似：
    • 首先使用 e.preventDefault 禁止浏览器默认行为。
    • 接着进行数据验证，不合要求的数据就会被驳回并显示警告（这里我们又显示对了?）。
    • 接着 dispatch 一个 type 为 SET_POSTS 的 action，将新发表的 post 添加到 Redux store 对应的 posts 数组中。我们注意到这里我们使用 useSelector Hooks 从 Redux store 里面获取了 nickName 和 avatar 属性，并把它们组合到 post.user 属性里，随着 action 的 payload 一起被 dispatch，我们用这个 user 属性标志发帖的用户属性。
    • 清空表单状态。
    • 接着我们 dispatch 一个 type 为 SET_POST_FORM_IS_OPENED 的 action 用来更新 isOpened 属性，它将关闭展示发表帖子的表单弹出层 FloatLayout 组件。
    • 最后提示发帖成功。

接着是我们 “首页” 页面组件另外一个底层子组件 PostCard，它主要用于展示一个帖子，让我们 src/components/PostCard/index.jsx 文件，对其中的内容作出对应的修改如下：

代码语言：javascript复制
import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'
import classNames from 'classnames'
import { AtAvatar } from 'taro-ui'

import './index.scss'

export default function PostCard(props) {
  // 注意：
  const { title = '', content = '', user } = props.post
  const { avatar, nickName } = user || {}

  const handleClick = () => {
    // 如果是列表，那么就响应点击事件，跳转到帖子详情
    if (props.isList) {
      Taro.navigateTo({
        url: `/pages/post/post?postId=${props.postId}`,
      })
    }
  }

  const slicedContent =
    props.isList && content.length > 66
      ? `${content.slice(0, 66)} ...`
      : content

  return (
    <View
      className={classNames('at-article', { postcard__isList: props.isList })}
      onClick={handleClick}
    >
      <View className="post-header">
        <View className="at-article__h1">{title}</View>
        <View className="profile-box">
          <AtAvatar circle size="small" image={avatar} />
          <View className="at-article__info post-nickName">{nickName}</View>
        </View>
      </View>
      <View className="at-article__content">
        <View className="at-article__section">
          <View className="at-article__p">{slicedContent}</View>
        </View>
      </View>
    </View>
  )
}

PostCard.defaultProps = {
  isList: '',
  post: [],
}

可以看到这个组件基本不保有自己的状态，它接收来自父组件的状态，我们对它的修改主要有下面五个部分：

  • 将之前的直接获取 props.title 和 props.content 放到了 props.post 属性中，我们从 props.post 属性中导出我们需要展示的 title 和 content，还要一个额外的 user 属性，它应该是一个对象，保存着发帖人的用户属性，我们使用解构的方法获取 user.avatar 和 user.nickName 的值。
  • 接着我们看到 return 的组件结构发生了很大的变化，这里我们为了方便，使用了 taro-ui 提供给我们的 Article 文章样式组件，用于展示类似微信公众号文章页的一些样式，可供用户快速呈现文章内容，可以详情可以查看 taro-ui 链接[9]，有了 taro-ui 加持，我们就额外的展示了发表此文章的用户头像（avatar）和昵称（nickName）。
  • 我们还可以看到，这里我们对原 content 做了一点修改，当 PostCard 组件在文章列表中被引用的时候，我们对内容长度进行截断，当超过 66 字符时，我们就截断它，并加上省略号 ...。
  • 最后，我们改动了 handleClick 方法，之前是在跳转路由的页面路径里直接带上查询参数 title 和 content ，当我们要传递的内容多了，这个路径就会显得很臃肿，所以这里我们传递此文章对应的 id，这样可以通过此 id 取到完整的 post 数据，使路径保持简洁，这也是最佳实践的推荐做法。

接着我们补充一下在 PostCard 组件里面会用到的样式，打开 src/components/PostCard/index.scss 文件，补充和改进对应的样式如下：

代码语言：javascript复制
@import '~taro-ui/dist/style/components/article.scss';
.postcard {
  margin: 30px;
  padding: 20px;
}

.postcard__isList {
  border-bottom: 1px solid #ddd;
  padding-bottom: 20px;
}

.post-header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.profile-box {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.post-nickName {
  color: #777;
}

可以看到我们更新了一些样式，然后引入了 taro-ui 提供给我们的 article 文章样式。

重构完 “首页” 页面组件的所有底层组件，我们开始完成最终的顶层组件，打开 src/pages/index/index.jsx 文件，对相应的内容修改如下：

代码语言：javascript复制
import Taro, { useEffect } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { AtFab, AtFloatLayout, AtMessage } from 'taro-ui'
import { useSelector, useDispatch } from '@tarojs/redux'

import { PostCard, PostForm } from '../../components'
import './index.scss'
import { SET_POST_FORM_IS_OPENED, SET_LOGIN_INFO } from '../../constants'

export default function Index() {
  const posts = useSelector(state => state.post.posts) || []
  const isOpened = useSelector(state => state.post.isOpened)
  const nickName = useSelector(state => state.user.nickName)

  const isLogged = !!nickName

  const dispatch = useDispatch()

  useEffect(() => {
    async function getStorage() {
      try {
        const { data } = await Taro.getStorage({ key: 'userInfo' })

        const { nickName, avatar } = data

        // 更新 Redux Store 数据
        dispatch({ type: SET_LOGIN_INFO, payload: { nickName, avatar } })
      } catch (err) {
        console.log('getStorage ERR: ', err)
      }
    }

    getStorage()
  })

  function setIsOpened(isOpened) {
    dispatch({ type: SET_POST_FORM_IS_OPENED, payload: { isOpened } })
  }

  function handleClickEdit() {
    if (!isLogged) {
      Taro.atMessage({
        type: 'warning',
        message: '您还未登录哦！',
      })
    } else {
      setIsOpened(true)
    }
  }

  console.log('posts', posts)

  return (
    <View className="index">
      <AtMessage />
      {posts.map((post, index) => (
        <PostCard key={index} postId={index} post={post} isList />
      ))}
      <AtFloatLayout
        isOpened={isOpened}
        title="发表新文章"
        onClose={() => setIsOpened(false)}
      >
        <PostForm />
      </AtFloatLayout>
      <View className="post-button">
        <AtFab onClick={handleClickEdit}>
          <Text className="at-fab__icon at-icon at-icon-edit"></Text>
        </AtFab>
      </View>
    </View>
  )
}

Index.config = {
  navigationBarTitleText: '首页',
}

可以看到我们上面的内容有以下五处改动：

  • 首先我们导出了 useSelector 钩子，然后从 Redux store 中获取了 posts 、isOpened 和 nickName 等属性。
  • 接着，我们将之前定义在 PostCard 组件上的属性进行了一次换血，之前是直接传递 title 和 content 属性，现在我们传递整个 post 属性，并且额外传递了一个 postId 属性，用于在 PostCard 里面点击跳转路由时进行标注。
  • 接着，我们去掉 PostForm 组件上面的所有属性，因为我们已经在组件内部定义了它们。
  • 接着，我们使用 useEffect Hooks，在里面定义并调用了 getStorage 方法，获取了我们保存在 storage 里面的用户登录信息，如果用户登录了，我们 dispatch 一个 type 为 SET_LOGIN_INFO 的 action，将这份登录信息保存在 Redux store 里面以供后续使用。
  • 最后，我们将 AtFab 的 onClick 回调函数替换成 handleClickEdit，在其中对用户点击进行判断，如果用户未登录，那么弹出警告，告知用户，如果用户已经登录，那么就 dispatch 一个 type 为 SET_POST_FORM_IS_OPENED 的 action 去设置 isOpened 属性，打开发帖的弹出层，允许用户进行发帖操作。

以重构 “文章详情” 页结束

最后，让我们坚持一下，跑赢重构工作的最后一公里?！完成 “文章详情” 页的重构。

让我们打开 src/pages/post/post.jsx 文件，对其中的内容作出相应的修改如下：

代码语言：javascript复制
import Taro, { useRouter } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { useSelector } from '@tarojs/redux'

import { PostCard } from '../../components'
import './post.scss'

export default function Post() {
  const router = useRouter()
  const { postId } = router.params

  const posts = useSelector(state => state.post.posts)
  const post = posts[postId]

  console.log('posts', posts, postId)

  return (
    <View className="post">
      <PostCard post={post} />
    </View>
  )
}

Post.config = {
  navigationBarTitleText: '帖子详情',
}

可以看到，上面的文件做了以下四处修改：

  • 我们从 router.params 中导出了 postId，因为之前我们在 PostCard 里面点击跳转的路径参数使用了 postId。
  • 接着我们导入并使用 useSelector Hooks 获取了保存在 Redux store 中的 posts 属性，然后使用上一步获取到的 postId，来获取我们最终要渲染的 post 属性。
  • 最后，我们将传给 PostCard 的属性改成上一步获取到的 post 。

注意 这里的 console.log 是调试时使用的，生产环境中建议删掉。

查看效果

可以看到，在未登录状态下，会提示请登录：

在已登录的情况下，发帖子会显示当前登录用户的头像和昵称：

小结

有幸！到这里，我们 Redux 重构之旅的万里长征就跑完了！让我们来回顾一下我们在这一小节中学到了那些东西。

  • 首先我们讲解了使用 Redux 的初衷，接着我们安装了相关依赖，然后引出了 Redux 三大核心概念：Store、Action、Reducers，接着我们创建了应用需要的两个 Reducer：post 和 user；接着我们将将 Redux 和 React 整合起来；因为 Action 是从组件中 dispatch 出来了，所以我们接下来就开始了组件的重构之旅。
  • 在重构 “我的” 页面组件时，我们按照 Redux 的思想，从它的底层组件三个登录按钮重构开始，接着重构了 LoggedMine 组件，再往上就是 Header 组件；重构完 Header 组件之后，我们接着从 Footer 组件的底层组件 Logout 组件开始重构，然后重构了 LoginForm 组件，最后是 Footer 组件，重构完 Header 和 Footer 组件，我们开始重构其上层组件 mine 页面组件，自此我们就完成了 “我的” 页面的重构。
  • 在重构 “首页” 页面组件时，我们同样按照 Redux 的思想，从它的底层组件 PostForm 组件开始，接着是 PostCard 组件，最后再回到顶层组件 index 首页页面组件。

在重构 “帖子详情” 页面组件时，因为其底层组件 PostCard 已经重构过了，所以我们就直接重构了 post 帖子详情页面组件。

能跟着这么长的文章坚持到这里，我想给你鼓个掌，也希望你能给自己鼓个掌，我想，我可以非常肯定且自豪的颁布给你第一名的奖章了?。

终于，这漫长的第五篇结束了。在接下来的文章中，我们将接触小程序云后台开发，并在前端接入后台数据。

想要学习更多精彩的实战技术教程？来图雀社区[10]逛逛吧。

本文所涉及的源代码都放在了 Github[11] 上，如果您觉得我们写得还不错，希望您能给❤️这篇文章点个在看 Github仓库加星❤️哦

参考资料

[1]

熟悉的 React，熟悉的 Hooks: https://juejin.im/post/5e046c4fe51d45584221e508

[2]

多页面跳转和 Taro UI 组件库: https://juejin.im/post/5e0891b66fb9a0165936fb0b

[3]

实现微信和支付宝多端登录: https://juejin.im/post/5e10118be51d454165777203

[4]

使用 Hooks 版的 Redux 实现大型应用状态管理（上篇）: https://juejin.im/post/5e100f78e51d4541493621cd

[5]

Redux 包教包会（一）：解救 React 状态危机: https://juejin.im/post/5df62cd8e51d4558270ef5ca

[6]

Redux 包教包会（二）：趁热打铁，完全重构: https://juejin.im/post/5df7b11c51882512664b1068

[7]

Redux 包教包会（三）：各司其职，重拾初心: https://juejin.im/post/5e0fe9705188253ab044c869

[8]

Github: https://github.com/tuture-dev/ultra-club

[9]

taro-ui 链接: https://taro-ui.jd.com/#/docs/article

[10]

图雀社区: https://tuture.co?utm_source=juejin_zhuanlan

[11]

Github: https://github.com/tuture-dev/ultra-club

● 一杯茶的时间，上手React框架开发● Taro小程序开发大型实战（一）：熟悉的React，熟悉的Hooks● Taro小程序开发大型实战（二）：多页面跳转和TaroUI组件库

·END·

redux http javascript https 网络安全

0 人点赞