react- reducer

   react- reducer 是react中useState的升级版,用于较复杂的状态管理,与uesState类似,官方地址:状态管理 – React

1.何时使用

   useState用于基本数据类型或数组,对象,都有其操作方法,对于一般项目不需要使用reducer,但是对于多个方法操作更深的状态,使用useReducer的好处就体现出来了

2.useState使用方法

1.基本数据类型:

//引入
import { useState } from 'react'

//类型: string,number,boolean:     

const [count,setCount]=useState("count")

const [count,setCount]=useState(0)

const [count,setCount]=useState(false)

setCount("newCount") //string类型

setCount(count+1)    //number类型

setCount(true)       //boolean类型 

2.数组:

数组	避免使用 (会改变原始数组)	推荐使用 (会返回一个新数组）
添加元素	push，unshift	concat，[...arr] 展开语法
删除元素	pop，shift，splice	filter，slice
替换元素	splice，arr[i] = ... 赋值	map
排序	reverse，sort	先将数组复制一份

//引入
import { useState } from 'react'

//类型: Array:     

const [count,setCount]=useState([1,2,3,4])


//删除:  删除数组中为1的选项

setCount(()=>count.filter(item => item !== 1))   


//更改:  数组中为1的选项更改为2

 setCount(() => count.map(item => {
          if (item === 1) {
                return 2
            } else {
                return item
            }}))

//添加 :添加 5

 setCount(() => [...count, 5])//末尾   setCount(() => [5,...count])  //开头

//排序

 const nextCount = [...Count];

 nextCount.reverse();
 
 setCount(nextCount)

 

3.对象

//引入
import { useState } from 'react'

//类型: Object:     

const [count,setCount]=useState({
        id: 1,
        name: '小明',
        sex: '男'
    })

setCount({ ...count,name: '小红' })

setCount({ ...count, name: '小红', sex: '女'})

3.useReducer使用方法

import React,{ useReducer } from 'react'

//初始化数据:数组中包含对象
const initCounts=
[{ id: 0, text: '小明', sex: '男' },
{ id: 1, text: '小红', sex: '男'  },
{ id: 2, text: '小李', sex: '男'  }]

const Test: React.FC = () => {

 //初始化 dispatch和countsReducer
 const [counts, dispatch] = useReducer(countsReducer, initCounts)

 //定义countsReducer函数分发增删改方法
 const countsReducer = (counts: any, action: any) => {
        switch (action.type) {
          //同useState中数组新增方法
            case 'add': {
                return [{
                    id: action.id,
                    text: action.text,
                    sex: false
                }, ...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)
            }
        }
    }
 //新增
function handAdd(){
   dispatch({
            type: 'add',     //和countsReducer中case对应
            id: nextId++,    //将ID绑定到action中
            text: text       //将text绑定到action中
        })}
//更改
 const handupData = (id: any, text: any) => {
        dispatch({
            type: 'updata',  //和countsReducer中case对应
            id: id,          //将ID绑定到action中
            text: text       //将text绑定到action中
        })
    }
//删除
 const handDelete = (id: any) => {
        dispatch({
            type: 'delete',  //和countsReducer中case对应
            id: id           //将ID绑定到action中
        }) 
    }


return(

<div>
  <button onClick={handAdd}>新增</button>
  <button onClick={()=>handupData('需要更改的ID','需要更改的文字')}>更改</button>
  <button onClick={()=>handDelete('需要删除的ID')}>删除</button>
</div>

)}


export default Test