当前位置:网站首页>Usereducer basic usage
Usereducer basic usage
2022-04-23 13:38:00 【Nianya】
One 、 introduce api
import React ,{useReducer}from 'react';
Two 、 Basic use
Set the value count, The default initial value is 0,
Pass in different distribution methods ,‘add’,‘sub’,
according to action Different , Return different values .
function UseReducerDemo() {
const [count, dispatch]=useReducer((state,action)=>{
switch (action) {
case 'add':
return state+1;
case 'sub':
return state-1;
default:
return state;
}
},0)
return<div>
<h2> Now the score is :{count} branch </h2>
<button style={
{marginRight:10}} onClick={()=>{dispatch('add')}}> Bonus points </button>
<button onClick={()=>{dispatch('sub')}}> points </button>
</div>
}
export default UseReducerDemo
3、 ... and 、 design sketch
End of example .
Four 、 Other related usage
The second parameter receives the value , Also accept {} object ,eg:
const initialState = {count: 0};
const [state, dispatch] = useReducer(reducer, initialState);
It can also be used in this way
function init(initialCount) {
return {count: initialCount};
}
function reducer(state, action) {
switch (action.type) {
case 'increment':
return {count: state.count + 1};
case 'decrement':
return {count: state.count - 1};
case 'reset':
return init(action.payload);
default:
throw new Error();
}
}
function Counter({initialCount}) {
const [state, dispatch] = useReducer(reducer, initialCount, init);
return (
<>
Count: {state.count}
<button
onClick={() => dispatch({type: 'reset', payload: initialCount})}>
Reset
</button>
<button onClick={() => dispatch({type: 'decrement'})}>-</button>
<button onClick={() => dispatch({type: 'increment'})}>+</button>
</>
);
版权声明
本文为[Nianya]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/04/202204230605115779.html
边栏推荐
- 软考系统集成项目管理工程师全真模拟题(含答案、解析)
- TIA博途中基于高速计数器触发中断OB40实现定点加工动作的具体方法示例
- Loading and using image classification dataset fashion MNIST in pytorch
- [point cloud series] deepmapping: unsupervised map estimation from multiple point clouds
- Playwright contrôle l'ouverture de la navigation Google locale et télécharge des fichiers
- Introduction to metalama 4 Use fabric to manipulate items or namespaces
- RTOS mainstream assessment
- Analysis of the latest Android high frequency interview questions in 2020 (BAT TMD JD Xiaomi)
- 校园外卖系统 - 「农职邦」微信原生云开发小程序
- 交叉碳市场和 Web3 以实现再生变革
猜你喜欢
LeetCode_ DFS_ Medium_ 695. Maximum area of the island
“湘见”技术沙龙 | 程序员&CSDN的进阶之路
Data warehouse - what is OLAP
MySQL 8.0.11下载、安装和使用可视化工具连接教程
【视频】线性回归中的贝叶斯推断与R语言预测工人工资数据|数据分享
在 pytorch 中加载和使用图像分类数据集 Fashion-MNIST
CSDN College Club "famous teacher college trip" -- Hunan Normal University Station
AI21 Labs | Standing on the Shoulders of Giant Frozen Language Models(站在巨大的冷冻语言模型的肩膀上)
[Journal Conference Series] IEEE series template download guide
@优秀的你!CSDN高校俱乐部主席招募!
随机推荐
Lpddr4 notes
According to the salary statistics of programmers in June 2021, the average salary is 15052 yuan. Are you holding back?
QT调用外部程序
[point cloud series] deepmapping: unsupervised map estimation from multiple point clouds
【快排】215. 数组中的第K个最大元素
Mysql数据库的卸载
CSDN高校俱乐部“名师高校行”——湖南师范大学站
校园外卖系统 - 「农职邦」微信原生云开发小程序
Servlet of three web components
On the bug of JS regular test method
顶级元宇宙游戏Plato Farm,近期动作不断利好频频
解决Oracle中文乱码的问题
这个SQL语名是什么意思
RTOS mainstream assessment
[multi screen interaction] realize dual multi screen display II: startactivity mode
MySQL5.5安装教程
“湘见”技术沙龙 | 程序员&CSDN的进阶之路
Part 3: docker installing MySQL container (custom port)
面试官给我挖坑:单台服务器并发TCP连接数到底可以有多少 ?
vscode小技巧