设计思想-派发器

前言

手机归类行为是分文件夹管理APP，希望一个手机集中管理和使用多个APP，即统一在个容器管理任务

在程序开发中即划分组件和模块，希望集成功能对任务统一执行

开发思维

派发器的思维模式

分组件，子组件，功能1,2,3, 希望集中管理而不去调用，通过接口的任务类型统一去派发，派发之后执行某一个任务，相当于把功能集成起来，使用派发接口时不用管如何实现，也不用管具体任务

单向数据流写法：

父组件为观察者，子组件发送emit通知父组件修改状态

弊端：

杂乱，组件中含有大量的逻辑代码

image-20220518194539550

通过接口分配任务写法：

此写法组件里不会有太多的逻辑，而是直接dispatch就可以实现逻辑，通过一个接口去分配任务和分配属性

image-20220518203357455

通过一个任务的状态类型或名称来判断做什么任务，派发器思想像redux和vuex派发思想，其实中央状态管理对单个组件树也不合适用，它适用于多个组件树的情况下使用

实现

目录结构：

  1. ├─src
  2. |  ├─App.jsx
  3. |  ├─index.js
  4. |  ├─components
  5. |  |     ├─TodoList2
  6. |  |     |     ├─Form.jsx
  7. |  |     |     ├─index.jsx - 使用todoReducer方法返回派发器定义的属性和方法
  8. |  |     |     ├─List.jsx
  9. |  |     |     ├─ListItem.jsx
  10. |  |     |     ├─store
  11. |  |     |     |   ├─action.js - 定义业务逻辑
  12. |  |     |     |   ├─actionType.js - 变量类型
  13. |  |     |     |   ├─index.js - 中央状态管理出口文件
  14. |  |     |     |   ├─reducer.js - 根据类型执行action对象里的方法
  15. |  |     |     |   └state.js - 状态数据池
  16. |  |     ├─TodoList1
  17. |  |     |     ├─Form.jsx
  18. |  |     |     ├─index.jsx
  19. |  |     |     ├─List.jsx
  20. |  |     |     └ListItem.jsx

源码地址：

https://gitee.com/kevinleeeee/todolist-dispatch-vue3-react-hook-demo