useReducer介绍和简单使⽤（六）
上节课学习了useContext函数，那这节课开始学习⼀下useReducer，因为他们两个很像，并且合作可以完成类似的Redux库的操作。在开发中使⽤useReducer可以让代码具有更好的可读性和可维护性，并且会给测试提供⽅便。那我们彻底的学习⼀下useReducer。这节课我们只是简单的学习⼀下useReducer语法和使⽤⽅法，尽量避免Redux的⼀些操作。这样讲更容易让不了解Redux的⼩伙伴接受。
reducer到底是什么？
为了更好的理解useReducer，所以先要了解JavaScript⾥的Redcuer是什么。它的兴起是从Redux⼴泛使⽤开始的，但不仅仅存在Redux中，可以使⽤冈的JavaScript来完成Reducer操作。那reducer其实就是⼀个函数，这个函数接收两个参数，⼀个是状态，⼀个⽤来控制业务逻辑的判断参数。我们举⼀个最简单的例⼦。
function countReducer(state, action) {
pe) {
case 'add':
return state + 1;
case 'sub':
return state - 1;
default:
return state;
}
}
上⾯的代码就是Reducer，你主要理解的就是这种形式和两个参数的作⽤，⼀个参数是状态，⼀个参数是如何控制状态。
useReducer的使⽤
了解reducer的含义后，就可以讲useReducer了，它也是React hooks提供的函数，可以增强我们的Reducer，实现类似Redux的功能。我们新建⼀个Example5.js的⽂件，然后⽤useReducer实现计数器的加减双向操作。（此部分代码的介绍可以看视频来学习）
import React, { useReducer } from 'react';
function ReducerDemo(){
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>现在的分数是{count}</h2>
<button onClick={()=>dispatch('add')}>Increment</button>
<button onClick={()=>dispatch('sub')}>Decrement</button>
</div>
)
}
export default ReducerDemo
这段代码是useReducer的最简单实现了，这时候可以在浏览器中实现了计数器的增加减少。
reacthooks理解
修改index.js⽂件，让ReducerDemo组件起作⽤。
import React from 'react';
import ReactDOM from 'react-dom';
import Example from './Example5'
这节课就先到这⾥，⼩伙伴们⼀定对useReducer有所了解啦，那下节课我们在来⽤⼀个具体的例⼦，实现类似Redux的⽤法。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。