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功能功能