useReducer
在hooks中,可以为函数式组件提供类似Redux的功能,类似于vuex都是提供状态管理的。官方提供的两种state管理：useState,useReducer。下面我们一起来看看useReducer的用法
实现累加器
举个简单例子来了解它的使用方法，点击按钮实现累加：
1.首选前面要引入useReducer，后面要使用它
2.定义[state, dispatch]来接收我们后面的useReducer，因为useReducer包含两个参数，一个参数为useReducer的函数，一个为初始值
3.在按钮中绑定点击事件，触发useReducer的事件需要使用dispatch，另外我们这里在函数中进行判断，如果action为add就累加1，否则返回state
import React, { useReducer } from 'react'
export default function App() {
const [state, dispatch] = useReducer((state, action) => {
if(action === 'add') {
return state+1
}
return state
}, 0)
return (
<div>App
<h1>{state}</h1>
<button onClick={() => dispatch('add')}>+1</button>
</div>
)
}这样就实现了效果：
上面代码中注意区分，useReducer中箭头函数后面的第一个值为操作状态的函数（累加的-判断），第二个值为0（初始值）
我们还可以使用case改写一下，加个功能：
原理都是一样的，使用这里的dispatch进行操作
export default function App() {
const [state, dispatch] = useReducer((state, action) => {
switch(action) {
case 'add':
return state+1
case 'sub':
return state-1
default:
return state
}
}, 0)
return (
<div>App
<h1>{state}</h1>
<button onClick={() => dispatch('add')}>+1</button>
<button onClick={() => dispatch('sub')}>-1</button>
</div>
)
}实现效果：
拆分改写
为了让大家看的更清楚用法，下面再给大家看一种写法，把上面的进行拆分，实现一样的功能：
const iniState = {count:0}
function reducer(state, action) {
switch(action.type) {
case 'add':
return {count: state.count + 1}
case 'sub':
return {count: state.count - 1}
default:
throw new Error()
}
}
export default function App() {
const [state, dispatch] = useReducer(reducer,iniState)
return (
<div>App
<h1>{state.count}</h1>
<button onClick={() => dispatch({type: 'add'})}>+1</button>
<button onClick={() => dispatch({type: 'sub'})}>-1</button>
</div>
)
}这里就相当于把useReducer的两个参数单拿出来写，并且在dispatch中传什么值都是可以的，我这里传的是对象，把函数和初始值单拿出来写也是可行的，实现一样的效果
useReducer的使用场景
- 如果说你的state是一个数组或者是对象
- 如果你的state变化很复杂,经常一个操作需要修改很多的state
- 如果你的应用比较大,希望UI和业务能够分开维护的时候
OK本篇的文章就到这里啦，如果对你有帮助，点赞关注支持一下呀，后续会持续给大家带来优质内容~
