新增、编辑类复杂场景变量维护

场景：比如列表项出现编辑或者新增业务时，接口设计的数据结构往往需要许多数据，这时候需要一套能维护这些变量的数据结构，并且好用，好修改变量。
处于编辑状态时，当用户修改了部分信息取消之后，基本信息要回退到修改前的版本

这里主要用到 useReducer,useRef

我们需要创建一个useREducer.ts文件专门用来处理结构修改的业务

//  定义接口
export interface IBaseInfo{
  varA:string;
  varB:string;
  ...,
}

interface IBaseInfoReducer{
 type: 'varA' | 'varB' | .... | 'all';
 data?:any;
}

// 初始化数据结构值
export const initBaseInfo={
  varA:'',
  varB:'',
  ...,
}

// 修改
export const BaseInfoReducer = (state:IBaseInfo,action:IBaseInfoReducer):IBaseInfo =>{
  const data = action.data;
  switch(action.type){
     case :'varA':
          return {...state,varA:data};
     case :'varA':
          return {...state,varA:data};
     ....,
     case :'all':
          return {...state,...data};
      default:
          return state;
  }
}

在tsx文件中，我们定义一下基础变量进行操作：
从useReducer.ts文件中引入BaseInfoReducer,initBaseInfo
定义state变量

const [state,dispatch] = useReducer(BaseInfoReducer,initBaseInfo);
const cancelState = useRef<any>({}); // 用于记录初始值，方便回退
//当编辑页面是，页面初始化后需要把传入的数据或者是通过id类字段请求的数据初始化给state
useEffect(()=>{
  cancelState.current = deepCopy(detailData);
  dispath({type:'all',data:detailData});
},[detailDate]); // 赋值

// 当基本信息被修改的时候，直接使用dispatch方法修改
dispatch({type:'varA',data:value});

// 因为界面中只维护了一套结构，当用户修改了部分，放弃修改取消时，需要对变量进行回退。
dispath({type:'all',data:cancelState.current});