react hooks reducer
import {useReducer}from 'react'
复杂的状态管对象中的值总会改变 不同状态不同时机使用
useState的替代方案
来源于redux中的reducer
参数变化
const [state,dispatch] = useReducer(reducer,initialState,initialAction)
参数解析：
1.reducer 函数 处理action 更新state
2. 初始状态state
3. 初始执行时被处理的action
返回值：
state 为状态值
dispatch 为更新state的方法 它接受action 作为参数
dispatch({
type:'reset'
})
这个方法被调用的时候 reducer方法也会被调用 并会根据action的描述去更新对应的数据
action
const action ={
type:"increase",
payload:{
other:"value"
// 携带的其他参数
}
}
action 转化为最新的state
reducer
action 和state的转化器
const [state,dispatch] = useReducer(reducer,initialState,initialAction)
// 业务中reducer 自己写
初始状态自己写
dispatch 是触发操作
const reducer = (state,action)=>{
switch(action.type){
case'reset':
return {count:state.count+1}
// 返回初始化对象值
// 最新的返回
}
}
拿到最新的state {state.count}
useContext 结合useReducer实现redux功能功能