React中的hook之useReducer

1.useReducer介绍

关于useReducer,在官方的解释为加强版useState,上篇文章我们讲到useState,操作于简单数据类型和对象,数组的新增,更改..而useReducer可以帮助我们具有有多种操作,操作更深层级的改变

2.useReducer何时使用

   useState用于基本数据类型或数组,对象,都有其操作方法,对于一般项目不需要使用reducer,当我们对于一个引用类型变量,有多种操作时,比如,一个对象,需要频繁更新,删除,增加里面的内容而渲染页面,此时再使用useState会变得繁琐,使项目降低可读性,此时,就需要useReducer出场啦.

3.useReducer使用方法

useReducer可以分为三部来实现:

1.定义useReducer

//useReducer接受三个参数:
1.第一个参数为对象, 其中包含更新state的纯函数 (纯函数的返回值为更新后的 state)
2.第二个参数为初始值,用于初始化 state 的任意值
3.可选函数, 用于计算初始值的函数。如果存在,该函数的返回值作为初始值,其函数参数为useReducer第二个参数

const [counts, dispatch] = useReducer(countsReducer,[{ id: 0, text: '小明'}])

2.定义countsReducer,根据方法名分发

//countsReducer:
第一个参数为初始值initCounts
第二个参数为更改counts的方法

const countsReducer = (counts, action) => {
        switch (action.type) {
          //同useState中数组新增方法
            case 'add': {
                return [{
                    id: action.id,
                    text: action.text,
                }, ...counts]
            }  
 
          //同useState中数组修改方法
            case 'upData': {
                return counts.map((item: any) => {
                    if (item.id === action.id) {
                        return { ...item, text: action.text }
                    } else {
                        return item
                    }
                })
            }

          //同useState中数组删除方法
            case 'delete': {
                return counts.filter((item: any) => item.id !== action.id)
            }
        }
    }

3.定义方法,并绑定在jsx中

 //新增
function handAdd(id,text){
   dispatch({
            type: 'add',     //和countsReducer中case对应
            id: id,    //将ID绑定到action中
            text: text       //将text绑定到action中
        })}
//更改
 const handupData = (id,text) => {
        dispatch({
            type: 'updata',  //和countsReducer中case对应
            id: id,          //将ID绑定到action中
            text: text       //将text绑定到action中
        })
    }
//删除
 const handDelete = (id) => {
        dispatch({
            type: 'delete',  //和countsReducer中case对应
            id: id           //将ID绑定到action中
        }) 
    }
    
<div>
  <button onClick={()=>handAdd(1,'小红')}>新增</button>
  <button onClick={()=>handupData('需要更改的ID','需要更改的文字')}>更改</button>
  <button onClick={()=>handDelete('需要删除的ID')}>删除</button>
</div>