useReducer代替Redux小案例-2(八)
2024-08-22 06:29:57
通过上节课的学习,用useContext
实现了Redux状态共享的能力,这节课看一下如何使用useReducer
来实现业务逻辑的控制。需要注意的是这节课的内容是接着上节课的,需要你把上节课的代码部分完成,才可以继续学习。如果不学习我相信有可能你会听不懂。
在color.js中添加Reducer
颜色(state)管理的代码我们都放在了color.js
中,所以在文件里添加一个reducer,用于处理颜色更新的逻辑。先声明一个reducer的函数,它就是JavaScript中的普通函数,在讲useReducer
的时候已经详细讲过了。有了reducer后,在Color组件里使用useReducer
,这样Color组件就有了那个共享状态和处理业务逻辑的能力,跟以前使用的Redux
几乎一样了。之后修改一下共享状态。我们来看代码:
import React, { createContext,useReducer } from 'react'; export const ColorContext = createContext({}) export const UPDATE_COLOR = "UPDATE_COLOR" const reducer= (state,action)=>{
switch(action.type){
case UPDATE_COLOR:
return action.color
default:
return state
}
} export const Color = props=>{
const [color,dispatch]=useReducer(reducer,'blue')
return (
<ColorContext.Provider value={{color,dispatch}}>
{props.children}
</ColorContext.Provider>
)
}
注意,这时候我们共享出去的状态变成了color和dispatch,如果不共享出去dispatch,你是没办法完成按钮的相应事件的。
通过dispatch修改状态
目前程序已经有了处理共享状态的业务逻辑能力,接下来就可以在buttons.js
使用dispatch
来完成按钮的相应操作了。先引入useContext
、ColorContext
和UPDATE_COLOR
,然后写onClick
事件就可以了。代码如下:
import React ,{useContext} from 'react';
import {ColorContext,UPDATE_COLOR} from './color' function Buttons(){
const { dispatch } = useContext(ColorContext)
return (
<div>
<button onClick={()=>{dispatch({type:UPDATE_COLOR,color:"red"})}}>红色</button>
<button onClick={()=>{dispatch({type:UPDATE_COLOR,color:"yellow"})}}>黄色</button>
</div>
)
} export default Buttons
这样代码就编写完成了,用useContext
和useReducer
实现了Redux的效果,这个代码编写过程比Redux要简单,但是也是有一定难度的。希望第一次接触的小伙伴能自己动手写5遍以上,把这种模式掌握好。
转自:https://jspang.com/posts/2019/08/12/react-hooks.html
最新文章
- 轻量级前端MVVM框架avalon - 执行流程1
- jquery富文本在线编辑器UEditor
- Spring获取ApplicationContext方式,和读取配置文件获取bean的几种方式
- 使用__autoload()来管理文件导入
- SQL_查找用户的表属于哪个表空间
- OTG驱动分析(二)
- 持续集成 windows下jenkins常见问题填坑
- 网​址​U​R​L​中​特​殊​字​符​转​义​编​码
- bzoj100题
- jq与原生js实现收起展开效果
- 关于 Java 面试,你应该准备这些知识点
- Spark机器学习基础一
- 微信、支付宝支付SDK
- cocos中FPS数值的含义
- [Web 前端] CSS篇之 4. position 和 display 的取值和各自的意思和用法
- 理解maven项目的pom.xml文件中,<;scope>;标签的作用——作用域以及依赖传递
- git 查看和撤销
- 7407 74LS07 74LV07 74LVC07
- .net+jquery+ashx实现客户端模拟登陆扩展
- EAS系统环境的搭建
热门文章
- JavaScript仿百度图片浏览效果(转载)
- springboot2.1.3使用jdbcTemplate
- c# IComparable与IComparer接口
- c# ArrayList 类
- CentOS7安装Redis单实例
- vs中找到接口和抽象类的具体实现类
- python的简介(解释器、变量、用户交互、if语句)
- 【转】以Python为例的Async / Await的编程基础
- jdk1.8换成11,启动项目报错java.net.MalformedURLException: unknown protocol: jrt
- 大数据之路week07--day05 (一个基于Hadoop的数据仓库建模工具之一 HIve)