useReducer+useContext的使用

我们在函数组件中定义数据的话，一般使用useState，但是useState有他的问题，useState中方法修改数据功能比较单一，不能处理比较复杂的业务逻辑，无法对数据进行集中式管理

可以借助userReducer的Hooks的方法处理复杂的逻辑对象

代码展示

import React, { useReducer } from 'react'


    // 定义初始化数据
    let inlist={
        count:10,
        msg:'hello useReducer'
    }
    // 定义reducer纯函数
    let reducer=(state,actions)=>{
        switch(actions.type){
            case 'ADD':
                return{
                    ...state,
                    count:state.count+1
                }
                break
            case 'REVERSE':
                return {
                    ...state,
                    msg:state.msg.split("").reverse().join("")
                }
                break
            default:
                return {
                    ...state
                }
                break
        }
    }
export default function UseReduce() {
    let [state,dispatch]=useReducer(reducer,inlist)
  return (
    <div>
        <h3>{state.count}</h3>
        <h3>{state.msg}</h3>
        <button onClick={()=>dispatch({type:'ADD'})}>count++</button>
        <button onClick={()=>dispatch({type:'REVERSE'})}>数据反转</button>
    </div>
  )
}

useReducer+useContext可以替换redux使用