欢迎继续阅读《Taro 小程序开发大型实战》系列,前情回顾:
user
逻辑的状态管理重构这是使用 Hooks 版的 Redux 重构状态管理的下篇,在上篇中我们实现了 user
部分 的状态管理的重构,但受限于篇幅,我们还剩下 Footer
组件部分没有重构,在这一篇中,我们将首先实现 Footer
组件的状态管理的重构,接着我们马上来实现 post
逻辑的状态管理的重构。
如果你不熟悉 Redux,推荐阅读我们的《Redux 包教包会》系列教程:
本文所涉及的源代码都放在了 Github 上,如果您觉得我们写得还不错,希望您能给❤️这篇文章点赞+Github仓库加星❤️哦~
此教程属于 React 前端工程师学习路线的一部分,欢迎来 Star 一波,鼓励我们继续创作出更好的教程,持续更新中~
本来这个小标题我是不想起的,但是因为,是吧,大家上面在没有小标题的情况下看了这么久,可能已经废(累)了,所以我就贴心的加上一个小标题,帮助你定位接下来讲解的重心。
是的接下来,我们要重构 “我的" 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 实现应用状态管理(下篇)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!