useReducer二次封装,解决hooks组件里useState声明过多代码阅读性差的问题

react里hooks变量声明的数量太多 容易导致代码可读性差,

组件通信,需要一对一传递的数据不整洁

本文针对以上情况对useReducer进行二次封装,实现在hooks 组件内 像在class 组件内类似的变量声明办法,当做一个工具使用,

--需要下载loadsh插件 或者自行导入深拷贝的办法,用来快速重置数据的初始状态

--有业务需要的同学,可以结合redux 进行修改,,来实现当前数据或者历史数据的缓存达到撤回的目的

import { useReducer} from 'react';
//需要下载lodash插件,或者自行导入深拷贝的方法,用于快捷重置数据的初始状态
import _ from 'lodash';
const App = (props) => {
  //记录数据用来回到初始化状态
  let __props__ = _.cloneDeep(props);

  const [store, dispatch] = useReducer((state, action) => {
    try {
      return { ...state, ...action };
    } catch (error) {
      console.error(error);
      return { ...state };
    }
  }, props);
  const _dispatch = (action, fun) => {
    dispatch(action);
      fun && fun({ ...store, ...action }, store);
  };
  return [
    store,
    _dispatch,
    {
      clearState: () => {
        dispatch(__props__);
      },
    },
  ];
};
export default App;

 

使用方法

import { useReducer } from '@/components';
const App = () => {
  const [state, setState, operation] = useReducer({ count: 1, name: '张三' });
  const { name } = state;
  return (
    <div>
      <button
        onClick={() => {
          setState({ count: state.count + 1 }, (state, lastState) => {
            console.log(state); //state=>是最新的数据状态
            console.log(lastState); //lastState=>更新前的数据状态
          });
        }}
      >
        count++
      </button>
      <p>count:{state.count}</p>
      <p> name:{name}</p>
      <p>
        <button onClick={operation.clearState}>重置</button>
      </p>
    </div>
  );
};
export default App;

以上是在产品中遇到的需求,简单写了一下 分享出来,如果那个不太合理,,欢迎同学们批评指正,,谢谢