React,Hooks中useReducer的使用

首先useReducer这个跟redux一点关系都没有…它的主要作用是防止state里面的数据操作太复杂

下面来演示一下怎么使用,点击加减改变数字的案例

一般来写就这样写

import React, { useState } from 'react'
export default function Home() {
const [counter,setCount] = useState(10)
const [state,dispatch] = useReducer(reducer,{counter:0})
  return (
    <div>
    <h2>Home当前计数:{counter}</h2> 
    <button onClick={e=>setCount(counter +1)}>+1</button>
    <button onClick={e=>setCount(counter -1)}>-1</button>
    </div>
  )
}

然后我们用useReducer来进行改造

export default function Home() {
  //0是初始化值
  const [state,dispatch] = useReducer(reducer,0)
  //state:当前状态值
  //dispatch:改变某一个值,dispatch一个对象
  return (
    <div>
      <h2>Home当前计数:{state.counter}</h2>
      <button onClick={e=>dispatch({type:'increament'})}>+1</button>
      <button onClick={e=>dispatch({type:'decreament'})}>-1</button>
    </div>
  )
}

再定义一个reducer函数

function reducer(state,action){
   switch(action.type){
     case 'increament':
     return state + 1
     case 'decreament':
      return state -1
     default:
       return state 
   }
}

当我们useReducer第二个参数是对象的时候呢??

 const [state,dispatch] = useReducer(reducer,{counter:0})
 
function reducer(state,action){
   switch(action.type){
     case 'increament':
      return {...state,counter:state.counter +1 }
     case 'decreament':
      return {...state,counter:state.counter -1 }
     default:
       return state 
   }
}

但是记住了这个reducer函数是共享的,但是数据不是共享的，就是如果你把它导出，在多个文件里面使用，当改变一个reducer里面值的时候,是不会一起发生变化的