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

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

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

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

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

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

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

此教程属于 React 前端工程师学习路线的一部分，欢迎来 Star 一波，鼓励我们继续创作出更好的教程，持续更新中~

搞定 Footer 的 Redux 化

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

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

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
  

  这篇关于Taro 小程序开发大型实战（五）：使用 Hooks 版的 Redux 实现应用状态管理（下篇）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！